Styles for SVG

Oct 28, 2011 at 10:37 AM

Having trouble getting styles to work. I have the following:

 

<svg contentScriptType="text/ecmascript" width="1050px" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" contentStyleType="text/css" height="155px" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" version="1.0">
  <desc>Four separate rectangles
  </desc>

  <defs>
  <font font-style="normal" font-variant="normal" id="FontID0" style="fill-rule:nonzero" font-weight="700" class="str1">
    <font-face font-family="Arial">
    </font-face>  
  </font> 
  <style type="text/css" xml:space="preserve">       
    .str1 {stroke:#1F1A17;stroke-width:2}
    .filA {fill:#51B25B}    
    .fil0 {fill:black}
    .fil1 {fill:white}    
    .test {font-family:'Arial'; font-weight:bold}    
  </style>
   
    <g viewBox="0px 0px 150px 35px" id="boxA">
        <rect x="0px" width="150px" height="35px" y="0px" class="filA" stroke="none"/>
        <text x="15px" font-size="26" y="26px" style="text-anchor: middle" class="test fil1 str1">A</text>
        <text x="75px" font-size="18" y="23px" style="text-anchor: middle" class="test fil0">(92 plus)</text>
    </g>  

</defs>
<use x="0px" y="60px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#boxA" xlink:type="simple" xlink:actuate="onLoad" xlink:show="embed"/>

</svg>

 

I should see a green box, but instead I see a black one. I have tried this with the style information inside a CDATA and without it and still no luck.

This has been confusing me for a couple of days now.

Any help much appreciated.

Thanks

Jason

Coordinator
Oct 28, 2011 at 11:15 AM

Hey Jason,

Sorry about the confusion but the library doesn't actually support <style> elements right now. Unfortunately you'd have to have them inline for them to work. E.g.:

<text ... style="fill: black;"/>

There's not currently an easy/quick way to add this support either (the 'style' system is pretty badly designed and in no way extensible).

Cheers,
Dave 

Oct 28, 2011 at 3:57 PM

Thanks Dave,

At least I know now. I can try and attack this from another direction.

Cheers

Jason