Question

我是SVG的新手，我想知道为什么我的动画只在Firefox中运行（我使用的是9.0.1）。

Safari和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来提供文件。我自己从来没有做过这部分，只看过别人是怎么做的，而且他们似乎都在工作。

与HTML内联的SVG不会运行动画。

<强>注意事项

当使用单引号而不是双精度时以及未设置顶部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与webkit中的svg不一致。这将改为：

演示：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 =＆gt; g和animation =＆gt; animationMotion。 animateMotion需要路径，路径不能包含百分比值，因此请向顶部svg元素添加viewBox="0 0 100 100"属性。现在，即使省略%，所有值也会像百分比值一样工作。同时添加preserveAspectRatio="none"，这会破坏比例但会使svg填满屏幕。

<强>最后

现在，只需粘贴原始代码的其余部分，然后相应地更改height和stroke-width。

演示：http://jsfiddle.net/ypqVx/

Answer 2

变化：

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

要：

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

这使它在Opera中有效。

SVG Animation仅在Firefox中正常工作

2 个答案: