Negative dx and gradients with color names in four browsers

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/