1

I'm struggling a little bit to figure out a proper way how to reuse *.svg files by placing them at different places within my HTML site, but applying different style sheets without using JavaScript.

Snippet from index.html:

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

myLogo.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>

One possibility as seen in the *.svg is to use CSS to change the fill to red, this works quite well, but also means that every embedded myLogo.svg will turn out red.

Is there any way how to assign proper CSS styles to the embedded object without using JavaScript?

4

1 に答える 1

0

あなたが何を望んでいるかは 100% わかりませんが、答えは、あなたが望むように物事を行うことはできないということだと確信しています。この質問は関連があると思います:埋め込み SVG にスタイルを適用する方法は?

于 2012-07-23T14:06:41.490 に答える