SVG Animation only working correctly in Firefox -

SVG Animation only working correctly in Firefox -

i'm new svg , i'm wondering why animation working in firefox (i'm using 9.0.1).

safari , opera seem display incorrectly. i'm not sure if it's problem code or if it's browser issue. help or advice working appreciated.

thanks!

here code:

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <style type='text/css'> <![cdata[ rect { fill: white; } line { stroke: black; stroke-width: 1px; } ]]> </style> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect width="100%" height="100%" /> <svg y="0%" width="100%" height="100%"> <line x1="0.81%" y1="49.80%" x2="0.81%" y2="50.2%" style='stroke-width: 1;' /> <line x1="1.63%" y1="45.49%" x2="1.63%" y2="54.51%" style='stroke-width: 1;' /> <line x1="2.44%" y1="7.84%" x2="2.44%" y2="92.16%" style='stroke-width: 1;' /> <line x1="3.25%" y1="55.69%" x2="3.25%" y2="44.31%" style='stroke-width: 1;' /> <line x1="4.07%" y1="44.31%" x2="4.07%" y2="55.69%" style='stroke-width: 1;' /> <line x1="4.88%" y1="33.33%" x2="4.88%" y2="66.67%" style='stroke-width: 1;' /> <line x1="5.69%" y1="65.10%" x2="5.69%" y2="34.9%" style='stroke-width: 1;' /> <line x1="6.50%" y1="64.71%" x2="6.50%" y2="35.29%" style='stroke-width: 1;' /> <line x1="7.32%" y1="43.92%" x2="7.32%" y2="56.08%" style='stroke-width: 1;' /> <line x1="8.13%" y1="30.98%" x2="8.13%" y2="69.02%" style='stroke-width: 1;' /> <line x1="8.94%" y1="45.49%" x2="8.94%" y2="54.51%" style='stroke-width: 1;' /> <line x1="9.76%" y1="66.27%" x2="9.76%" y2="33.73%" style='stroke-width: 1;' /> <line x1="10.57%" y1="63.14%" x2="10.57%" y2="36.86%" style='stroke-width: 1;' /> <line x1="11.38%" y1="53.73%" x2="11.38%" y2="46.27%" style='stroke-width: 1;' /> <line x1="12.20%" y1="38.43%" x2="12.20%" y2="61.57%" style='stroke-width: 1;' /> <line x1="13.01%" y1="30.20%" x2="13.01%" y2="69.8%" style='stroke-width: 1;' /> <line x1="13.82%" y1="44.31%" x2="13.82%" y2="55.69%" style='stroke-width: 1;' /> <line x1="14.63%" y1="60.00%" x2="14.63%" y2="40%" style='stroke-width: 1;' /> <line x1="15.45%" y1="68.24%" x2="15.45%" y2="31.76%" style='stroke-width: 1;' /> <line x1="16.26%" y1="62.75%" x2="16.26%" y2="37.25%" style='stroke-width: 1;' /> <line x1="17.07%" y1="48.63%" x2="17.07%" y2="51.37%" style='stroke-width: 1;' /> <line x1="17.89%" y1="38.43%" x2="17.89%" y2="61.57%" style='stroke-width: 1;' /> <line x1="18.70%" y1="36.08%" x2="18.70%" y2="63.92%" style='stroke-width: 1;' /> <line x1="19.51%" y1="39.22%" x2="19.51%" y2="60.78%" style='stroke-width: 1;' /> <line x1="20.33%" y1="49.41%" x2="20.33%" y2="50.59%" style='stroke-width: 1;' /> <line x1="21.14%" y1="60.39%" x2="21.14%" y2="39.61%" style='stroke-width: 1;' /> <line x1="21.95%" y1="63.92%" x2="21.95%" y2="36.08%" style='stroke-width: 1;' /> <line x1="22.76%" y1="57.25%" x2="22.76%" y2="42.75%" style='stroke-width: 1;' /> <line x1="23.58%" y1="51.76%" x2="23.58%" y2="48.24%" style='stroke-width: 1;' /> <line x1="24.39%" y1="49.80%" x2="24.39%" y2="50.2%" style='stroke-width: 1;' /> <line x1="25.20%" y1="42.35%" x2="25.20%" y2="57.65%" style='stroke-width: 1;' /> <line x1="26.02%" y1="38.82%" x2="26.02%" y2="61.18%" style='stroke-width: 1;' /> <line x1="26.83%" y1="41.18%" x2="26.83%" y2="58.82%" style='stroke-width: 1;' /> <line x1="27.64%" y1="49.02%" x2="27.64%" y2="50.98%" style='stroke-width: 1;' /> <line x1="28.46%" y1="53.33%" x2="28.46%" y2="46.67%" style='stroke-width: 1;' /> <line x1="29.27%" y1="58.04%" x2="29.27%" y2="41.96%" style='stroke-width: 1;' /> <line x1="30.08%" y1="60.78%" x2="30.08%" y2="39.22%" style='stroke-width: 1;' /> <line x1="30.89%" y1="57.65%" x2="30.89%" y2="42.35%" style='stroke-width: 1;' /> <line x1="31.71%" y1="51.37%" x2="31.71%" y2="48.63%" style='stroke-width: 1;' /> <line x1="32.52%" y1="43.92%" x2="32.52%" y2="56.08%" style='stroke-width: 1;' /> <line x1="33.33%" y1="41.96%" x2="33.33%" y2="58.04%" style='stroke-width: 1;' /> <line x1="34.15%" y1="44.31%" x2="34.15%" y2="55.69%" style='stroke-width: 1;' /> <line x1="34.96%" y1="45.10%" x2="34.96%" y2="54.9%" style='stroke-width: 1;' /> <line x1="35.77%" y1="46.27%" x2="35.77%" y2="53.73%" style='stroke-width: 1;' /> <line x1="36.59%" y1="52.16%" x2="36.59%" y2="47.84%" style='stroke-width: 1;' /> <line x1="37.40%" y1="55.69%" x2="37.40%" y2="44.31%" style='stroke-width: 1;' /> <line x1="38.21%" y1="54.51%" x2="38.21%" y2="45.49%" style='stroke-width: 1;' /> <line x1="39.02%" y1="54.51%" x2="39.02%" y2="45.49%" style='stroke-width: 1;' /> <line x1="39.84%" y1="54.51%" x2="39.84%" y2="45.49%" style='stroke-width: 1;' /> <line x1="40.65%" y1="52.16%" x2="40.65%" y2="47.84%" style='stroke-width: 1;' /> <line x1="41.46%" y1="47.84%" x2="41.46%" y2="52.16%" style='stroke-width: 1;' /> <line x1="42.28%" y1="44.31%" x2="42.28%" y2="55.69%" style='stroke-width: 1;' /> <line x1="43.09%" y1="43.92%" x2="43.09%" y2="56.08%" style='stroke-width: 1;' /> <line x1="43.90%" y1="46.67%" x2="43.90%" y2="53.33%" style='stroke-width: 1;' /> <line x1="44.72%" y1="49.02%" x2="44.72%" y2="50.98%" style='stroke-width: 1;' /> <line x1="45.53%" y1="52.55%" x2="45.53%" y2="47.45%" style='stroke-width: 1;' /> <line x1="46.34%" y1="53.33%" x2="46.34%" y2="46.67%" style='stroke-width: 1;' /> <line x1="47.15%" y1="52.55%" x2="47.15%" y2="47.45%" style='stroke-width: 1;' /> <line x1="47.97%" y1="50.98%" x2="47.97%" y2="49.02%" style='stroke-width: 1;' /> <line x1="48.78%" y1="50.20%" x2="48.78%" y2="49.8%" style='stroke-width: 1;' /> <line x1="49.59%" y1="49.41%" x2="49.59%" y2="50.59%" style='stroke-width: 1;' /> <line x1="50.41%" y1="46.67%" x2="50.41%" y2="53.33%" style='stroke-width: 1;' /> <line x1="51.22%" y1="47.45%" x2="51.22%" y2="52.55%" style='stroke-width: 1;' /> <line x1="52.03%" y1="49.02%" x2="52.03%" y2="50.98%" style='stroke-width: 1;' /> <line x1="52.85%" y1="50.59%" x2="52.85%" y2="49.41%" style='stroke-width: 1;' /> <line x1="53.66%" y1="50.20%" x2="53.66%" y2="49.8%" style='stroke-width: 1;' /> <line x1="54.47%" y1="49.02%" x2="54.47%" y2="50.98%" style='stroke-width: 1;' /> <line x1="55.28%" y1="50.59%" x2="55.28%" y2="49.41%" style='stroke-width: 1;' /> <line x1="56.10%" y1="50.59%" x2="56.10%" y2="49.41%" style='stroke-width: 1;' /> <line x1="56.91%" y1="49.41%" x2="56.91%" y2="50.59%" style='stroke-width: 1;' /> <line x1="57.72%" y1="47.84%" x2="57.72%" y2="52.16%" style='stroke-width: 1;' /> <line x1="58.54%" y1="48.24%" x2="58.54%" y2="51.76%" style='stroke-width: 1;' /> <line x1="59.35%" y1="48.63%" x2="59.35%" y2="51.37%" style='stroke-width: 1;' /> <line x1="60.16%" y1="50.20%" x2="60.16%" y2="49.8%" style='stroke-width: 1;' /> <line x1="60.98%" y1="51.37%" x2="60.98%" y2="48.63%" style='stroke-width: 1;' /> <line x1="61.79%" y1="52.16%" x2="61.79%" y2="47.84%" style='stroke-width: 1;' /> <line x1="62.60%" y1="51.76%" x2="62.60%" y2="48.24%" style='stroke-width: 1;' /> <line x1="63.41%" y1="51.37%" x2="63.41%" y2="48.63%" style='stroke-width: 1;' /> <line x1="64.23%" y1="50.59%" x2="64.23%" y2="49.41%" style='stroke-width: 1;' /> <line x1="65.04%" y1="50.98%" x2="65.04%" y2="49.02%" style='stroke-width: 1;' /> <line x1="65.85%" y1="49.41%" x2="65.85%" y2="50.59%" style='stroke-width: 1;' /> <line x1="66.67%" y1="48.24%" x2="66.67%" y2="51.76%" style='stroke-width: 1;' /> <line x1="67.48%" y1="47.84%" x2="67.48%" y2="52.16%" style='stroke-width: 1;' /> <line x1="68.29%" y1="48.63%" x2="68.29%" y2="51.37%" style='stroke-width: 1;' /> <line x1="69.11%" y1="49.41%" x2="69.11%" y2="50.59%" style='stroke-width: 1;' /> <line x1="69.92%" y1="49.80%" x2="69.92%" y2="50.2%" style='stroke-width: 1;' /> <line x1="70.73%" y1="49.80%" x2="70.73%" y2="50.2%" style='stroke-width: 1;' /> <line x1="71.54%" y1="50.98%" x2="71.54%" y2="49.02%" style='stroke-width: 1;' /> <line x1="72.36%" y1="51.76%" x2="72.36%" y2="48.24%" style='stroke-width: 1;' /> <line x1="73.17%" y1="51.37%" x2="73.17%" y2="48.63%" style='stroke-width: 1;' /> <line x1="73.98%" y1="50.98%" x2="73.98%" y2="49.02%" style='stroke-width: 1;' /> <line x1="74.80%" y1="51.37%" x2="74.80%" y2="48.63%" style='stroke-width: 1;' /> <line x1="75.61%" y1="50.20%" x2="75.61%" y2="49.8%" style='stroke-width: 1;' /> <line x1="76.42%" y1="50.20%" x2="76.42%" y2="49.8%" style='stroke-width: 1;' /> <line x1="77.24%" y1="50.20%" x2="77.24%" y2="49.8%" style='stroke-width: 1;' /> <line x1="78.05%" y1="49.80%" x2="78.05%" y2="50.2%" style='stroke-width: 1;' /> <line x1="78.86%" y1="48.63%" x2="78.86%" y2="51.37%" style='stroke-width: 1;' /> <line x1="79.67%" y1="48.63%" x2="79.67%" y2="51.37%" style='stroke-width: 1;' /> <line x1="80.49%" y1="49.80%" x2="80.49%" y2="50.2%" style='stroke-width: 1;' /> <line x1="81.30%" y1="49.80%" x2="81.30%" y2="50.2%" style='stroke-width: 1;' /> <line x1="82.11%" y1="49.41%" x2="82.11%" y2="50.59%" style='stroke-width: 1;' /> <line x1="82.93%" y1="49.41%" x2="82.93%" y2="50.59%" style='stroke-width: 1;' /> <line x1="83.74%" y1="49.41%" x2="83.74%" y2="50.59%" style='stroke-width: 1;' /> <line x1="84.55%" y1="50.20%" x2="84.55%" y2="49.8%" style='stroke-width: 1;' /> <line x1="85.37%" y1="50.20%" x2="85.37%" y2="49.8%" style='stroke-width: 1;' /> <line x1="86.18%" y1="49.80%" x2="86.18%" y2="50.2%" style='stroke-width: 1;' /> <line x1="86.99%" y1="50.20%" x2="86.99%" y2="49.8%" style='stroke-width: 1;' /> <line x1="87.80%" y1="50.59%" x2="87.80%" y2="49.41%" style='stroke-width: 1;' /> <line x1="88.62%" y1="50.59%" x2="88.62%" y2="49.41%" style='stroke-width: 1;' /> <line x1="89.43%" y1="49.80%" x2="89.43%" y2="50.2%" style='stroke-width: 1;' /> <line x1="90.24%" y1="49.41%" x2="90.24%" y2="50.59%" style='stroke-width: 1;' /> <line x1="91.06%" y1="50.20%" x2="91.06%" y2="49.8%" style='stroke-width: 1;' /> <line x1="91.87%" y1="49.80%" x2="91.87%" y2="50.2%" style='stroke-width: 1;' /> <line x1="92.68%" y1="49.80%" x2="92.68%" y2="50.2%" style='stroke-width: 1;' /> <line x1="93.50%" y1="49.80%" x2="93.50%" y2="50.2%" style='stroke-width: 1;' /> <line x1="94.31%" y1="50.20%" x2="94.31%" y2="49.8%" style='stroke-width: 1;' /> <line x1="95.12%" y1="50.20%" x2="95.12%" y2="49.8%" style='stroke-width: 1;' /> <line x1="95.93%" y1="49.80%" x2="95.93%" y2="50.2%" style='stroke-width: 1;' /> <line x1="96.75%" y1="50.20%" x2="96.75%" y2="49.8%" style='stroke-width: 1;' /> <line x1="97.56%" y1="50.20%" x2="97.56%" y2="49.8%" style='stroke-width: 1;' /> <line x1="98.37%" y1="49.80%" x2="98.37%" y2="50.2%" style='stroke-width: 1;' /> <line x1="99.19%" y1="49.80%" x2="99.19%" y2="50.2%" style='stroke-width: 1;' /> <line x1="100.00%" y1="49.80%" x2="100.00%" y2="50.2%" style='stroke-width: 1;' /> </svg> <svg y="0%" width="100%" height="100%"> <rect x='0' y='0' height='100%' width='100%' /> <animate attributename='x' from='0' to='100%' dur='1s' fill='freeze' /> <line x1='0' y1='50%' x2='5' y2='50%' style='stroke-width: 10; stroke: red;' /> </svg> </svg> </svg>

the safari issue

there's alot of pitfalls avoid compared other browsers. easiest way i've come satisfying results embed svg file within html this:

<!doctype html> <html> <head> </head> <body> <embed type="image/svg+xml" src="mysvgfile.svg" width="100%"/> </body> </html>

if serving pure svg files (i.e. not wrapped in html) must configure server serve files content-type: application/xhtml+xml or content-type: image/svg+xml. i've never done part myself, watched how others , both seem work.

svg inline html won't run animations.

precautions

i've run problems when using single quotes instead of doubles , when not setting width , height of top svg element. perhaps work anyway, best remain on safe side.

core problem

if cut down code core problem end this:

demo: http://jsfiddle.net/frnrw/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"> <svg x="0" y="0"> <animate attributename="x" from="0" to="100%" dur="1s" fill="freeze"/> <line x1="0" y1="50%" x2="5" y2="50%" stroke-width="10" stroke="red"/> </svg> </svg>

apparently, animate doesn't play nice svg in webkit. work instead:

demo: http://jsfiddle.net/ptpcx/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="150" viewbox="0 0 100 100" preserveaspectratio="none"> <g> <animatemotion path="m0,0 h100" dur="1s" fill="freeze"/> <line x1="0" y1="50%" x2=".5" y2="50%" stroke-width="5" stroke="red"/> </g> </svg>

the workaround switching svg => g , animation => animationmotion. animatemotion requires path , paths can't contain percentage values, add together viewbox="0 0 100 100" attribute top svg element. values work percentage values if leave out %. add together preserveaspectratio="none", ruins proportions makes svg fill screen.

finally

now, paste in rest of original code , alter height , stroke-width appropriately.

demo: http://jsfiddle.net/ypqvx/

svg