SVG <set> 标签的 dur 属性没有动画答案

【问题标题】：SVG <set> tag's dur attribute does not animateSVG <set> 标签的 dur 属性没有动画
【发布时间】：2014-12-21 18:51:42
【问题描述】：

我正在尝试使用 SVG <set> 标记为翻转设置动画，但即使我指定了 dur="1s"，过渡也是瞬时的（在 Firefox、Safari、Opera 和 Chrome 中）。

<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red">
        <set attributeType="CSS" attributeName="fill" to="green" begin="mouseover" end="mouseout" dur="1s" />
    </circle>
</svg> 

</body>
</html>

我可以使用两个<animate> 标签来实现我想要的效果，但是我希望能够将过渡应用到我想要保留的可能具有不同初始颜色的多个元素（此方法要求我指定初始颜色）第二个动画标签中的颜色为“红色”）。

<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red">
        <animate attributeType="CSS" attributeName="fill" to="green" begin="mouseover" dur="1s" fill="freeze" />
        <animate attributeType="CSS" attributeName="fill" to="red" begin="mouseout" dur="1s" fill="freeze"/>
    </circle>
</svg> 

</body>
</html>

第一个代码段中的<set> 标记保留了初始颜色，但过渡没有动画效果。如果我对 w3 规范的理解是正确的，那应该是 - 这看起来像是特定于浏览器的错误，还是我误解了 w3 规范？有没有更好的方法来解决这个问题？

【问题讨论】：

复制案例：jsfiddle.net/4xx5p（在 Safari 和 Firefox 上都是如此）
感谢您确认它在 Safari 中也不起作用；我也刚刚在 Opera 和 Chrome 中进行了测试，我也得到了相同的行为。

标签： css svg w3c

【解决方案1】：

如SVG 1.1 Specification中所述：

“set”元素提供了一种只需设置属性值指定持续时间的简单方法。
…
to = "<value>"在“set”元素的持续时间内指定属性的值。

（强调我的。）

如您所见，<set> 元素的duration 不是过渡时间，而是要应用效果的时间。如果您删除 end 属性，您将看到颜色从红色变为绿色并持续 1 秒 and then revert 到原始值。

有关更多详细信息，请阅读SMIL Specification 中的<set> 元素。

编辑：这是一个使用自定义数据来注释 SVG 元素的示例，以及一个使用该数据创建您想要的 <animate> 元素的一次性脚本，基于元素。你可以在http://phrogz.net/svg/change-color-on-hover.svg查看这个例子

<svg xmlns="http://www.w3.org/2000/svg" xmlns:y="yasashiku" viewBox="0 0 240 150">
  <title>Change Color on Hover</title>
  <style>
    circle { stroke:black; stroke-width:2px }
    circle:not([fill]) { fill:purple }
  </style>
  <circle cx="50"  cy="50"  r="40" fill="red"    y:hoverAnimFillTo="blue"  y:hoverAnimDur="0.3s" />
  <circle cx="100" cy="100" r="40" fill="red"    y:hoverAnimFillTo="green" y:hoverAnimDur="1s" />
  <circle cx="150" cy="42"  r="40" fill="orange" y:hoverAnimFillTo="yellow" />
  <circle cx="200" cy="100" r="40"               y:hoverAnimFillTo="steelblue" />
  <script>
    var els = document.getElementsByTagName('*'),
        y   = 'yasashiku';
    for (var i=els.length;i--;){
      var fillColor = els[i].getAttributeNS(y,'hoverAnimFillTo');
      if (fillColor){
        var dur = els[i].getAttributeNS(y,'hoverAnimDur') || '0.1s';
        createOn(els[i],'animate',{
          begin:'mouseover',
          attributeType:'CSS', attributeName:'fill',
          to:fillColor,
          dur:dur, fill:'freeze'
        });
        createOn(els[i],'animate',{
          begin:'mouseout',
          attributeType:'CSS', attributeName:'fill',
          to:els[i].getAttribute('fill') || computedStyle(els[i],'fill'),
          dur:dur, fill:'freeze'
        });
      }
    }
    function createOn(el,name,attrs){
      var e = el.appendChild(document.createElementNS(el.namespaceURI,name));
      for (var name in attrs) e.setAttribute(name,attrs[name]);
      return e;
    }
    function computedStyle(el,name){
      return document.defaultView.getComputedStyle(el,null)[name];
    }
  </script>
</svg>

【讨论】：

谢谢；关于在没有先验知识的情况下如何恢复初始颜色的任何想法？
@yasashiku 就个人而言，我只需要 JS 来控制颜色或（更简单）根据属性动态创建 <animate> 元素。如果这是您的选择（如果 JS 可用）并且您需要帮助，我可以用详细信息修改我的答案。
……没关系，我已经创建了一个示例并无论如何编辑了问题。希望这会有所帮助。
我试图尽可能多地避免使用 js 有几个原因（我正在尝试一个荒谬的 MVC 级别......其中所有图形都是严格的 SVG），但我猜小 javascript 将是不可避免的......它会使下游的事情复杂化，但感谢所有帮助！

【解决方案2】：

使用“values”和“KeyTimes”属性？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red">
    <animate attributeType="CSS" attributeName="fill" values="red;green;green;red" keyTimes="0;0.2;0.8;1" begin="mouseover" dur="2s" fill="freeze" />
    <animate attributeType="CSS" attributeName="fill" to="red" begin="mouseout" dur="1s" fill="freeze"/>
  </circle>
</svg>

【讨论】：