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

Is it possible to style external svg file with css without modifying the svg file content?

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

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

And is there any better way to display external svg file in html5?

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

3 个解决方案

#1

It's not possible using an img tag, these are basically similar to bitmaps as far as accessing or modify them is concerned. You could use the <iframe> tag with its style attribute instead or alternatively just include the svg inline in the file which you can do with html5.

使用img标签是不可能的,就访问或修改它们而言,它们基本上类似于位图。您可以将标记与其style属性一起使用,或者只是在文件中包含svg inline,您可以使用html5。&lt;/p&gt;

#2

Almost. If you can embed your SVG directly in your HTML5 document using the svg tag, then you can style it with CSS, like so:

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

#3

Things have changed a bit since this question was asked. You can use an SVG injector to make the SVG inline.

自问这个问题以来,事情发生了一些变化。您可以使用SVG注入器使SVG内联。

With SVGInject you can add your SVG like this:

使用SVGInject,您可以像这样添加SVG:

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

The injector will replace the <img> element with the <svg> element from the SVG file after is has loaded. Then you can style all elements of the SVG just as any other element in the HTML DOM.

加载后,注入器将使用SVG文件中的是否可以使用css设置外部svg文件的样式？元素。然后,您可以像在HTML DOM中的任何其他元素一样设置SVG的所有元素的样式。

Disclaimer: I am one of the authors of SVGInject.

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

#1

#2