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

【问题标题】：Define an inline svg completely with css instead of in the html file itself完全使用 css 而不是在 html 文件本身中定义内联 svg
【发布时间】：2014-02-09 17:57:46
【问题描述】：

我有一个使用内联 svg 的 html 文件。我使用它，所以我可以将类添加到我的 svg 并使用 CSS 设置它们的样式。以下 sn-p 有效：

<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: ... ;
 }

但这似乎不起作用。也许我在语法上弄错了，或者也许不能这样做。如果是这样，还有其他方法可以防止在我的 html 文件中复制/粘贴 svg 吗？我正在尝试遵循“0,1 或无限”设计模式，并复制/粘贴代码 3 次打破了这一点。

【问题讨论】：

标签： html css svg

【解决方案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" />

等等

【讨论】：

看了文档后，感觉这个defs/use标签只能用来引用SAME svg里面的defs。我在我的 html 文件中的不同位置有 3 个 svg，我希望所有 3 个都使用相同的路径。
那么您误读了文档；-) 根据规范，您可以在多个标签上使用它。这不考虑浏览器错误，但这绝对适用于 Firefox。
我应该把 defs 放在哪里？它在这个 jsfiddle 中不起作用：jsfiddle.net/PULxU
您必须将 defs 放在 svg 标记中，以便它位于 SVG 命名空间中。您可以使用现有的 svg 标签之一或另一个。例如jsfiddle.net/PULxU/2
好的，谢谢，我知道它现在是如何工作的了。是否可以在外部文件上定义定义，然后从其他文件中引用该定义？或者我是否需要在每个使用 svg 的 html 文件中添加一个 def？

【解决方案2】：

在 HTML5 中您可以做到。

请试试这个：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

另一方面，您可以创建自己的 SVG 并通过 <img src="" /> 获取它。示例如下：

<img class="papa" src="http://s.cdpn.io/3/kiwi.svg">

参考这里：

(1)http://css-tricks.com/using-svg/

这里的另一个参考如何通过 css 更改它：

(2)http://codepen.io/chriscoyier/pen/evcBu

【讨论】：

确实，这让我可以在同一页面上多次导入相同的 .svg，但我无法使用 css 类设置“svg”的样式。例如，图像上的类（在本例中为“papa”）不允许我为奇异果重新着色。
如果你仔细阅读了我给你的参考资料，这里有深入的解释如何使用它。我使用 css 提供了另一个参考供您阅读。如果对你有帮助，别忘了标记我的答案。
如果我将 html 类属性放在我的 .svg 文件中，而不是将其放在我的 html 文件中，然后使用将该 svg 文件导入我的 html 中，我的浏览器会知道它必须解释 .svg 文件中的类吗？还是会因为 svg（以及它的类属性）不是实际 DOM 的一部分而忽略它们？
如果您的浏览器支持 SVG，那么它将读取它。请仔细阅读：SVG Reference

【解决方案3】：

您不能使用 CSS 设置 svg 属性。您只能设置笔触、填充等样式。唯一的方法是使用 javascript 动态设置这些路径。我会推荐 jQuery。

这个链接应该有助于使用 jQuery 修改 svg 文件。 Modify a svg file using jQuery

【讨论】：