This project is read-only.

Styles for SVG

Oct 28, 2011 at 11:37 AM

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


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

  <font font-style="normal" font-variant="normal" id="FontID0" style="fill-rule:nonzero" font-weight="700" class="str1">
    <font-face font-family="Arial">
  <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}    
    <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>

<use x="0px" y="60px" xmlns:xlink="" xlink:href="#boxA" xlink:type="simple" xlink:actuate="onLoad" xlink:show="embed"/>



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.



Oct 28, 2011 at 12:15 PM

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


Oct 28, 2011 at 4:57 PM

Thanks Dave,

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