2012-07-21 74 views
1

我正在努力找出一种合适的方法,将* .svg文件放在我的HTML网站的不同位置,但不使用JavaScript来应用不同的样式表。可重复使用嵌入svg到html

段从index.html的:

<OBJECT type="image/svg+xml" data="myLogo.svg" class="svglogo"> 
<img src="svglogo_fallback.png"> 
</OBJECT> 

myLogo.svg:

所看到的* .SVG
<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" class="mySvg" id="test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" enable-background="new 0 0 841.89 595.28" xml:space="preserve"> 

<defs> 
    <style type="text/css"><![CDATA[ 
     .mySvg .teste { 
     fill: red; 
     } 
    ]]></style> 
    </defs> 

<path class="teste" fill="#000000" d="abcdefg"/> 
</svg> 

一种可能性是使用CSS来改变填充为红色,这作品相当好,但也意味着每个嵌入的myLogo.svg都会变成红色。

有什么办法如何将适当的CSS样式分配给嵌入对象而不使用JavaScript?

回答