是否可以使用CSS样式来美化外部SVG文件？

Question

是否可以使用CSS样式来美化外部SVG文件？

csshtmlsvg

11

有没有可能在不修改SVG文件内容的情况下，通过CSS样式来为外部SVG文件添加样式？

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

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

- eneepo

3个回答

4

几乎可以。如果您能够使用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>

- james.garriss

3

他要求外部SVG，而不是内联的。 - grm

2

正确。但通常了解最近的替代方案也很好。 - james.garriss

2

自这个问题被提出以来，情况有些变化。您可以使用SVG注入器将SVG内联。使用SVGInject，您可以像这样添加您的SVG：

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

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

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

- Waruyama

这个答案有点误导人，因为没有任何改变可以使非内联SVG样式化。此解决方案在页面加载时使用JavaScript来拉取外部SVG并将SVG内联到DOM中。十有八九，在首次内联SVG时会产生更高效的结果，因为您还节省了大量网络请求和/或客户端工作。 - Darian Moody

@DarianMoody 但是内联SVG不适用于动态网页，不支持懒加载，并且会使您的源代码难以阅读。我们已经成功地使用SVG注入一段时间了，它非常好用。 - Waruyama

我并没有说它不起作用，我说它对大多数人来说效果不佳。 "内联SVG对于动态网页无效"，我不确定你的意思，抱歉。懒加载-公平的观点，但大多数情况下，您会想要内联SVG，字节大小相对较小（考虑图标集，徽标等-您可能正在做一些不内联的事情是有道理的）。源代码可读性差得多根本不是用户面临的问题；此外，例如与二进制图像相比，SVG要容易得多。 - Darian Moody

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Longson · Accepted Answer

使用img标签不可能实现，因为在访问或修改方面它们与位图基本相似。相反，您可以使用<iframe>标签和其style属性，或者将svg直接嵌入html5文件中。