Question

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

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

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

Answer 1

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

Answer 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>

Answer 3

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

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

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

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

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

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

3 个答案: