SVG动画无效

时间:2015-01-22 13:43:23

标签: image animation svg

我正在尝试创建一个SMIL-animated SVG文件,但它似乎没有按预期工作。我的代码如下所示:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200"     xml:space="preserve">

  <clipPath id="clipCircle">
    <path d="M100,100 L147,16 A100,100 0 0,1 200,100 z" />
        <animateTransform
            attributeName="transform"
            begin="0s"
            dur="4s"
            type="rotate"
            from="0 100 100"
            to="360 100 100"
            repeatCount="indefinite" 
        />
  </clipPath>

<image x="20" y="20" overflow="visible" width="160" height="160"     xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAMgCAYAAADbcAZoAA    AACXBIWXMAAC4jAAAuIwF4pT92AAAK
T2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AU
...
COYNMKaUZ5jftwvj88uYjifgjKKqVW6rGKdqRooUKVL8o8X/NwBRjJhbjc2gSgAAAABJRU5ErkJg
gg==" transform="matrix(0.24 0 0 0.24 4 4)">
</image>

<image  x="3" y="3" width="194" height="194" clip-path="url(#clipCircle)"     overflow="visible"     xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAMgCAYAAADbcAZoAA    AACXBIWXMAAC4jAAAuIwF4pT92AAAK
T2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AU
...
DG/KE4SGw+ObGgJkPYGx9OZcXEcxPtTbNIj0XN2SbiYIgiDcD/z3APR6bzPXK8r+AAAAAElFTkSu
QmCC" transform="matrix(0.24 0 0 0.24 4 4)">
</image>

</svg>

我正在尝试将一个<image>设置为另一个<clipPath>,但可见输出应限制在{{1}}定义的区域。

0 个答案:

没有答案