我有一个使用内联 svg 的 html 文件。我使用它,所以我可以将类添加到我的 svg 并使用 CSS 设置它们的样式。以下代码段有效:
<div>
<svg class="icon" viewbox="0 0 512 512">
<path d=" ... "/>
</svg>
</div>
但是,如果 svg 很复杂,标签可能会很长。我目前在 3 个不同的位置使用这个 svg,每次我需要复制粘贴整个路径。如果我只能定义路径 1 次,最好是在这样的 css 类中,那就更好了:
<div>
<svg class="icon" viewbox="0 0 512 512">
<path class="compleximage"/>
</svg>
</div>
.compleximage
{
d: ... ;
}
但这似乎行不通。也许我在语法上弄错了,或者可能无法以这种方式完成。如果是这样,是否有其他方法可以防止将 svg 复制/粘贴到我的 html 文件中?我正在尝试遵循“0,1 或无限”设计模式,并复制/粘贴代码 3 次以打破它。
最佳答案
您可以使用 use标签在多个地方显示路径。只需给路径一个 id 属性,然后在 <use>
的 xlink:href 中引用它元素。
有点像
<defs>
<path id="image1" d="..." />
</defs>
<use x="20" y="10" xlink:href="#image1" />
<use x="50" y="50" xlink:href="#image1" />
等等
关于html - 完全使用 css 而不是在 html 文件本身中定义内联 svg,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21657061/