html - 完全使用 css 而不是在 html 文件本身中定义内联 svg

Question

我有一个使用内联 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 次以打破它。

Answer 1

您可以使用 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" />

等等