D3.js generated to code below. There is not a single browser that displays this code 100% correct.
Two questions rise: 1. Is a negative dx allowed? Firefox 13 / Opera 12 ignore it, Chrome 19 /IE9 apply it. 2. Are color names allowed in a gradient? Firefox 13 does apply it, the other three display black bars. Do I have to change the code or are the browsers buggy? Arjen <svg xmlns:svg="http://www.w3.org/2000/svg"; xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; version="1.0" height="174" width="1278"> <defs> <linearGradient spreadMethod="pad" y2="100%" x2="0%" y1="0%" x1="0%" id="gradientPositive"> <stop stop-opacity="1" stop-color="dodgerblue" offset="0%"></stop> <stop stop-opacity="1" stop-color="steelblue" offset="100%"></stop> </linearGradient> </defs> <defs> <linearGradient spreadMethod="pad" y2="100%" x2="0%" y1="0%" x1="0%" id="gradientNegative"> <stop stop-opacity="1" stop-color="crimson" offset="0%"></stop> <stop stop-opacity="1" stop-color="firebrick" offset="100%"></stop> </linearGradient> </defs> <g transform="translate(95,18)"> <text text-anchor="middle" dy="-3" x="-40">-40</text> <text text-anchor="middle" dy="-3" x="54">-35</text> <text text-anchor="middle" dy="-3" x="148">-30</text> <text text-anchor="middle" dy="-3" x="242">-25</text> <text text-anchor="middle" dy="-3" x="336">-20</text> <text text-anchor="middle" dy="-3" x="430">-15</text> <text text-anchor="middle" dy="-3" x="524">-10</text> <text text-anchor="middle" dy="-3" x="618">-5</text> <text text-anchor="middle" dy="-3" x="712">0</text> <text text-anchor="middle" dy="-3" x="806">5</text> <text text-anchor="middle" dy="-3" x="900">10</text> <text text-anchor="middle" dy="-3" x="994">15</text> <text text-anchor="middle" dy="-3" x="1088">20</text> <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="-40" x1="-40"></line> <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="54" x1="54"></line> <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="148" x1="148"></line> <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="242" x1="242"></line> <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="336" x1="336"></line> <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="430" x1="430"></line> <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="524" x1="524"></line> <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="618" x1="618"></line> <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="712" x1="712"></line> <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="806" x1="806"></line> <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="900" x1="900"></line> <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="994" x1="994"></line> <line style="stroke: rgb(204, 204, 204);" y2="156" y1="0" x2="1088" x1="1088"></line> </g> <g transform="translate(95,24)"> <text text-anchor="end" dy=".35em" dx="-.3em" fill="black" stroke="none" y="12.5" x="712">essential5</text> <text text-anchor="start" dy=".35em" dx=".3em" fill="black" stroke="none" y="37.5" x="712">Lichaam</text> <text text-anchor="end" dy=".35em" dx="-.3em" fill="black" stroke="none" y="62.5" x="712">Status</text> <text text-anchor="end" dy=".35em" dx="-.3em" fill="black" stroke="none" y="87.5" x="712">Identiteit</text> <text text-anchor="end" dy=".35em" dx="-.3em" fill="black" stroke="none" y="112.5" x="712">Samenwerken</text> <text text-anchor="end" dy=".35em" dx="-.3em" fill="black" stroke="none" y="137.5" x="712">Kennis</text> </g> <g transform="translate(95,24)"> <rect fill="url(#gradientPositive" stroke="white" width="0" x="712" height="25" y="0"></rect> <rect fill="url(#gradientNegative" stroke="white" width="695.6" x="16.400000000000006" height="25" y="25"></rect> <rect fill="url(#gradientPositive" stroke="white" width="319.5999999999999" x="712" height="25" y="50"></rect> <rect fill="url(#gradientPositive" stroke="white" width="0" x="712" height="25" y="75"></rect> <rect fill="url(#gradientPositive" stroke="white" width="0" x="712" height="25" y="100"></rect> <rect fill="url(#gradientPositive" stroke="white" width="0" x="712" height="25" y="125"></rect> <text stroke="none" fill="black" text-anchor="start" dy=".35em" dx=".3em" y="12.5" x="712">0</text> <text stroke="none" fill="black" text-anchor="end" dy=".35em" dx="-.3em" y="37.5" x="16.400000000000006">-37</text> <text stroke="none" fill="black" text-anchor="start" dy=".35em" dx=".3em" y="62.5" x="1031.6">17</text> <text stroke="none" fill="black" text-anchor="start" dy=".35em" dx=".3em" y="87.5" x="712">0</text> <text stroke="none" fill="black" text-anchor="start" dy=".35em" dx=".3em" y="112.5" x="712">0</text> <text stroke="none" fill="black" text-anchor="start" dy=".35em" dx=".3em" y="137.5" x="712">0</text> <line style="stroke: rgb(0, 0, 0);" y2="156" y1="-6" x2="712" x1="712"></line> </g> </svg> ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
