html - 如何创建 SVG 单独的 Sprite 文件
问题描述
我在创建 SVG 精灵时遇到问题
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="search-grey" viewBox="0 0 26.05 26.05">
<defs>
<style>.cls-1,.cls-2{fill:none}.cls-2{stroke:gray;stroke-linejoin:round}.cls-3{clip-path:url(#clip-path)}.cls-4{clip-path:url(#clip-path-2)}.cls-5{fill:url(#linear-gradient)}</style>
<clipPath id="clip-path">
<path d="M17.88-116.52c-.73-1.93-5.48-7.79-7.55-7.79-2.57 0-6.79 3.83-11.73 2-6-2.17-5.18-10.32-11.91-13.18a33.36 33.36 0 0 1 3.73 1.31c-3.23-5.29-10.81-3.13-12.43-.81-.25.92 1.61 2.6 3.18 3.71 1.43 2 1.6 2.18.43 5.71s7.8 2.39 10.29 5.11c2.69 3 5.77 5.3 9.9 6.17a2.46 2.46 0 0 1 .39.09c.83 2 7.23 7.62 16.46 10.34-1.34-1.55 0-10.78-.76-12.7" class="cls-1"/>
</clipPath>
<clipPath id="clip-path-2">
<path d="M-248.64-137.83H222.2v80.44h-470.84z" class="cls-1"/>
</clipPath>
<linearGradient id="linear-gradient" x1="-49.74" x2="-49.36" y1="255.49" y2="255.49" gradientTransform="scale(-34.13 34.13) rotate(62.12 190.304 167.061)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset=".01" stop-color="#fdfcf9"/>
<stop offset=".17" stop-color="#e9dbbe"/>
<stop offset=".32" stop-color="#d7bf8b"/>
<stop offset=".47" stop-color="#c9a961"/>
<stop offset=".62" stop-color="#be9741"/>
<stop offset=".76" stop-color="#b68a2a"/>
<stop offset=".89" stop-color="#b2831c"/>
<stop offset="1" stop-color="#b08017"/>
</linearGradient>
</defs>
<circle cx="10.58" cy="10.58" r="10.08" class="cls-2"/>
<path d="M18.14 18.14l7.56 7.56" class="cls-2"/>
<g class="cls-3">
<g class="cls-4">
<path d="M258.66-120.24L119.27 120.02-285.11-74.97l139.39-240.27 404.38 195z" class="cls-5"/>
</g>
</g>
</symbol>
</svg>
以上是我的名为“svg-sprites.svg”的svg sprite文件
在 HTML 我使用这段代码
<svg viewBox="0 0 26.05 26.05" class="icon"><use xlink:href="#search-grey"></use></svg>
但它没有正确显示我在 Illustrator 中创建的图标。
我不知道为什么它不起作用。
解决方案
推荐阅读
- javascript - 即使没有更改,如何强制 TypeORM 使用 repository.save() 更新实体
- mobile - 是否可以从 OneSignal 向 Harmony OS 发送推送通知?
- python - 使用 Python,Azure KeyVault Secret Client 以编程方式连接
- azure - 无论出价如何,都会取消分配 Azure 现货实例。相同的非现货实例运行良好
- angular - 在 Angular 8/9/11 中加密和解密本地存储
- excel - 单击单元格后,Excel 更改导出列表的外观
- java - Maven - 带有 TestNG 的黄瓜。通过标签开始黄瓜测试后 - 所有 testng 测试 @Test 与黄瓜一同时开始
- javascript - 通过框架内的链接进行 iframe 导航
- docker - WSL 2 中的 Docker 和与 Visual Studio 的集成
- redux - 如何从prepareHeaders访问给定端点/的rtk查询切片数据?