是否可以使用 css 设置外部 svg 文件的样式？答案

【问题标题】：Is it possible to style external svg file with css?是否可以使用 css 设置外部 svg 文件的样式？
【发布时间】：2018-08-31 21:01:40
【问题描述】：

是否可以在不修改 svg 文件内容的情况下使用 css 设置外部 svg 文件的样式？

<img src="image/svg/3ds-max.svg">

还有没有更好的方法在 html5 中显示外部 svg 文件？

【问题讨论】：

标签： css html svg

【解决方案1】：

不可能使用img标签，就访问或修改它们而言，它们基本上类似于位图。您可以使用 <iframe> 标记及其样式属性，或者只是在文件中包含 svg 内联，您可以使用 html5 执行此操作。

【讨论】：

当 :( 任何人都有链接说明为什么会这样？
@BradleyFlood longsonr.wordpress.com/2013/10/23/…

【解决方案2】：

几乎。如果您可以使用 svg 标签将 SVG 直接嵌入到 HTML5 文档中，那么您可以使用 CSS 设置样式，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            #redcircle { stroke:black; stroke-width:5; }
        </style>
    </head>
    <body>
        <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            <circle id="redcircle" cx="50" cy="50" r="30" fill="red" /> 
        </svg>
    </body>
</html>

【讨论】：

他要求外部 svg，而不是内联
是的。但通常很高兴知道最近的替代品。

【解决方案3】：

自从提出这个问题以来，情况发生了一些变化。您可以使用 SVG 注入器使 SVG 内联。

使用SVGInject，您可以像这样添加您的 SVG：

 <img src="image/svg/3ds-max.svg" onload="SVGInject(this)" >

在加载后，注入器将用 SVG 文件中的 <svg> 元素替换 <img> 元素。然后，您可以像 HTML DOM 中的任何其他元素一样设置 SVG 的所有元素的样式。

免责声明：我是 SVGInject 的作者之一。

【讨论】：

这个答案有点误导，因为没有任何改变允许对非内联 SVG 进行样式设置。此解决方案在页面加载时使用 JavaScript 来拉入外部 SVG 并将 SVG 内联到 DOM。十分之九，首先内联 SVG 会产生更高的性能结果，因为您还保存了一堆网络请求和/或为客户端工作。
@DarianMoody 但是内联 SVG 不适用于动态网页，不支持延迟加载，并且会降低源代码的可读性。我们已经成功使用 SVG 注入有一段时间了，它确实有效。
我没有说它不起作用，我说它对大多数人来说表现不佳。 “内联 SVG 不适用于动态网页”，我不确定您的意思是什么，抱歉。延迟加载 - 公平点，但大多数时候你想要内联 SVG，字节大小会相对较小（想想图标集、徽标等 - 你可能正在做一些没有内联意义的事情）。源代码的可读性较差根本不是面向用户的问题。例如，SVG 也比二进制图像更具可读性。