SVG Animation работает только в Firefox

Question

Я новичок в SVG, и мне интересно, почему моя анимация работает только в Firefox (я использую 9.0.1).

Safari and Opera, похоже, отображает его неправильно. Я не уверен, что это проблема с моим кодом или проблема с браузером. Любая помощь или совет, чтобы получить эту работу, будут очень признательны.

Спасибо!

Вот мой код:

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

Answer 1

Проблема Safari

Там же много ошибок, чтобы избежать по сравнению с другими браузерами. Самый простой способ я придумал для удовлетворения результатов встроить файл SVG внутри HTML как это:

<!doctype html> 
<html> 
<head> 
</head> 
<body> 

    <embed type="image/svg+xml" src="mySvgFile.svg" width="100%"/> 

</body> 
</html> 

Если вы служите чистые SVG файлов (т.е. не завернутые в HTML), вы должны настроить ваш сервер подавать файлы с Content-Type: application/xhtml+xml или Content-Type: image/svg+xml. Я никогда не делал эту часть самостоятельно, только смотрел, как это делают другие, и оба они, похоже, работают.

SVG встроенный с HTML не запускает анимацию.

Мера предосторожность

Я столкнулся с проблемами при использовании одиночных кавычек вместо двойников, а также когда не устанавливать ширину и высоту верхнего элемента SVG. Возможно, он все равно будет работать, но лучше всего оставаться на безопасной стороне.

Основная проблема

Если мы уменьшаем свой код основной проблемы мы в конечном итоге с этим:

Демо: 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> 

Видимо, animate не играет хорошо с svg в webkit. Это будет работать вместо:

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> 

Обойти это переключение svg =>g и animation =>animationMotion. animateMotion требует, чтобы путь и пути не содержали процентных значений, поэтому добавьте атрибут viewBox="0 0 100 100" в верхний элемент svg. Теперь ВСЕ значения будут работать как процентные значения, даже если оставить %. Также добавьте preserveAspectRatio="none", это разрушает пропорции, но заставляет svg заполнять экран.

Наконец

Теперь, просто вставьте в остальной части исходного кода и изменить height и stroke-width соответствующим образом.

Демо: http://jsfiddle.net/ypqVx/

Answer 2

Изменение:

<animate attributeName='x' from='0' to='100%' dur='1s' fill='freeze' /> 

To:

<animate attributeName='x' from='0%' to='100%' dur='1s' fill='freeze' /> 

Это делает его работу в Opera.