从外部svg加载的动画路径

时间:2017-12-31 11:52:03

标签: animation svg

当我在svg中定义带动画的简单路径并立即使用它时,一切正常(请参阅以下代码段)



#declare Angle = VAngle(PointT, Point0);
#declare Perp = VPerp_To_Plane(PointT, Point0);
sphere{
    Point0, R
    RotMatFromVectorAndAngle(Perp, Angle)
}




现在,当我尝试将此svg移动到外部文件并从那里加载时,会显示svg,但动画不会运行。

loaders.svg

<html>

<body>
  <svg width='100%' height='100%' preserveAspectRatio="xMaxYMax">
    <defs>
      <symbol id="myloader" width="100%" height="100%" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 80">							
        <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
	  <animateTransform attributeName="transform" attributeType="xml" dur="0.6s" from="0 25 25" repeatCount="indefinite" to="360 25 25" type="rotate"/>
        </path>
      </symbol>
    </defs>
    <use xlink:href="#myloader"></use>
  </svg>
</body>

</html>

HTML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:xl="http://www.w3.org/1999/xlink" width="100%" height="100%" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 50 50;" version="1.1" viewBox="0 0 50 80">
    <defs>
        <symbol id="myloader" width="100%" height="100%" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" style="enable-background:new 0 0 50 50;" viewBox="0 0 50 80">
            <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
                <animateTransform attributeName="transform" attributeType="xml" dur="0.6s" from="0 25 25" repeatCount="indefinite" to="360 25 25" type="rotate"/>
            </path>
        </symbol>
    </defs>
</svg>

这是预期的行为还是我做错了什么。我希望动画也可以从外部资源运行。

0 个答案:

没有答案