svg使用方法
在head部分先引用一个svg 设置为display none、定义id
<svg style="display: none">
<symbol id="shop-path" viewBox="0 0 22 22">
<!-- 具体的内容 -->
</symbol>
</svg>
再在svg图片里面把具体的路径复制过去
最后在代码里面用use引用就能使用了
<!-- 使用 <use> 引用 -->
<svg width="22" height="22" fill="red">
<use href="#mac-path"></use>
</svg>样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SVG with Use</title>
<style>
.colored-svg {
fill: red; /* 通过 CSS 改变颜色 */
}
</style>
<svg style="display: none">
<symbol id="mac-path" viewBox="0 0 22 22">
<g clip-path="url(#clip0_1393_29731)">
<path
d="M3.057 7.125C2.67793 7.125 2.35631 7.25719 2.09193 7.52157C1.82754 7.78595 1.69531 8.10321 1.69531 8.47348V14.1587C1.69531 14.5382 1.8275 14.8596 2.09193 15.124C2.35631 15.3884 2.67793 15.5206 3.057 15.5206C3.43579 15.5206 3.75547 15.3884 4.01576 15.124C4.27552 14.8596 4.40576 14.5382 4.40576 14.1587V8.47348C4.40576 8.10317 4.27357 7.78595 4.00915 7.52157C3.74473 7.25719 3.42728 7.125 3.057 7.125Z"
/>
<path
d="M14.0051 2.02272L14.9439 0.290986C15.0055 0.176339 14.9836 0.0884235 14.8779 0.0266044C14.7632 -0.0267016 14.6751 0.000309411 14.6135 0.105728L13.6617 1.8513C12.8241 1.48098 11.9382 1.29549 11.004 1.29549C10.0697 1.29549 9.18372 1.48102 8.34646 1.8513L7.39455 0.105728C7.33269 0.000309411 7.24457 -0.0264629 7.13016 0.0266044C7.02427 0.0887019 7.00235 0.176339 7.06421 0.290986L8.00299 2.02272C7.05108 2.50816 6.29294 3.18423 5.72885 4.0524C5.16476 4.92105 4.8826 5.8703 4.8826 6.90181H17.1122C17.1122 5.87053 16.83 4.92125 16.2659 4.0524C15.7018 3.18423 14.948 2.50816 14.0051 2.02272ZM8.57774 4.54154C8.47622 4.6433 8.35497 4.69394 8.21403 4.69394C8.0728 4.69394 7.95402 4.6433 7.85711 4.54154C7.76021 4.44026 7.71176 4.31949 7.71176 4.17807C7.71176 4.03713 7.76021 3.91611 7.85711 3.81459C7.95402 3.71331 8.07308 3.66267 8.21403 3.66267C8.35497 3.66267 8.47622 3.71331 8.57774 3.81459C8.67902 3.91635 8.7299 4.03713 8.7299 4.17807C8.72962 4.31925 8.67878 4.44026 8.57774 4.54154ZM14.1504 4.54154C14.0533 4.6433 13.9343 4.69394 13.7936 4.69394C13.6523 4.69394 13.5311 4.6433 13.4298 4.54154C13.3283 4.44026 13.2777 4.31949 13.2777 4.17807C13.2777 4.03713 13.3283 3.91611 13.4298 3.81459C13.5311 3.71331 13.6523 3.66267 13.7936 3.66267C13.9345 3.66267 14.0533 3.71331 14.1504 3.81459C14.2474 3.91635 14.2958 4.03713 14.2958 4.17807C14.2958 4.31925 14.2474 4.44026 14.1504 4.54154Z"
/>
<path
d="M4.9375 16.1845C4.9375 16.5903 5.07844 16.9339 5.36037 17.2158C5.64253 17.4977 5.98608 17.6387 6.39164 17.6387H7.37008L7.38349 20.6403C7.38349 21.0193 7.51568 21.3412 7.78006 21.6056C8.04444 21.87 8.36193 22.0022 8.73197 22.0022C9.1108 22.0022 9.43263 21.87 9.69705 21.6056C9.96147 21.3412 10.0937 21.0194 10.0937 20.6403V17.639H11.9182V20.6403C11.9182 21.0193 12.0503 21.3412 12.3147 21.6056C12.5792 21.87 12.9007 22.0022 13.2798 22.0022C13.6586 22.0022 13.9805 21.87 14.2449 21.6056C14.5093 21.3412 14.6415 21.0194 14.6415 20.6403V17.639H15.6331C16.0297 17.639 16.3688 17.498 16.6513 17.2161C16.9331 16.9341 17.0742 16.5906 17.0742 16.1848V7.37891H4.9375V16.1845Z"
/>
<path
d="M18.9501 7.125C18.5798 7.125 18.2626 7.25524 17.9981 7.51501C17.7338 7.77525 17.6016 8.09493 17.6016 8.47348V14.1587C17.6016 14.5382 17.7337 14.8596 17.9981 15.124C18.2626 15.3884 18.58 15.5206 18.9501 15.5206C19.3289 15.5206 19.6507 15.3884 19.9152 15.124C20.1796 14.8596 20.3117 14.5382 20.3117 14.1587V8.47348C20.3117 8.09489 20.1796 7.77525 19.9152 7.51501C19.6507 7.25524 19.3289 7.125 18.9501 7.125Z"
/>
</g>
</symbol>
</svg>
</head>
<body>
<!-- 使用 <use> 引用 -->
<svg width="22" height="22" fill="red">
<use href="#mac-path"></use>
</svg>
</body>
</html>
原文地址：https://blog.csdn.net/m0_73605639/article/details/142884770
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！