Css SVG<；设置>；标签'；s dur属性不设置动画
我试图使用SVGCss SVG<；设置>；标签'；s dur属性不设置动画,css,svg,w3c,Css,Svg,W3c,我试图使用SVG标记来设置滚动动画，但即使我指定dur=“1s”，转换也是瞬时的（在Firefox、Safari、Opera和Chrome中） 我可以使用两个标记实现我想要的效果，但我希望能够将转换应用到多个元素，这些元素可能具有我想要保留的不同初始颜色（此方法要求我在第二个动画标记中指定初始颜色“红色”） 第一个代码段中的标记保留初始颜色，但过渡未设置动画。如果我对w3规范的理解是正确的，那么应该是-这看起来像是浏览器特有的bug，还是我误解了w3规范？有没有更好的方法来解决这个问题？
to=”“持续时间end编辑：下面是一个使用自定义数据注释SVG元素的示例，以及一个使用该数据创建
悬停时更改颜色
圆{笔划：黑色；笔划宽度：2px}
圆圈：非（[fill]）{fill:purple}
var els=document.getElementsByTagName（'*'），
y=‘yasashiku’；
对于（变量i=els.length；i--；）{
var fillColor=els[i].getAttributeNS（y，'hoverAnimFillTo'）；
如果（填充颜色）{
var dur=els[i].getAttributeNS（y，'hoverAnimDur'）| |'0.1s'；
createOn（els[i]，“动画化”{
开始：'mouseover'，
attributeType:'CSS'，attributeName:'fill'，
致：fillColor，
dur:dur，填充：“冻结”
});
createOn（els[i]，“动画化”{
开始：'mouseout'，
attributeType:'CSS'，attributeName:'fill'，
收件人：els[i].getAttribute（'fill'）| | computedStyle（els[i]，'fill'），
dur:dur，填充：“冻结”
});
}
}
函数createOn（el、名称、属性）{
var e=el.appendChild（document.createElements（el.namespaceURI，name））；
for（attrs中的var name）e.setAttribute（name，attrs[name]）；
返回e；
}
函数computedStyle（el，名称）{
return document.defaultView.getComputedStyle（el，null）[name]；
}
如中所述：
“set”元素提供了一种简单的方法，只需在指定的持续时间内设置属性的值
…
to=”“
指定“set”元素持续时间内属性的值
（我的重点。）
如您所见，
元素的持续时间
不是过渡时间，而是应用效果的时间。如果删除end
属性，您将看到颜色从红色变为绿色，持续1秒，变为原始值
有关更多详细信息，请阅读中的
元素
编辑：下面是一个使用自定义数据注释SVG元素的示例，以及一个使用该数据创建
悬停时更改颜色
圆{笔划：黑色；笔划宽度：2px}
圆圈：非（[fill]）{fill:purple}
var els=document.getElementsByTagName（'*'），
y=‘yasashiku’；
对于（变量i=els.length；i--；）{
var fillColor=els[i].getAttributeNS（y，'hoverAnimFillTo'）；
如果（填充颜色）{
var dur=els[i].getAttributeNS（y，'hoverAnimDur'）| |'0.1s'；
createOn（els[i]，“动画化”{
开始：'mouseover'，
attributeType:'CSS'，attributeName:'fill'，
致：fillColor，
dur:dur，填充：“冻结”
});
createOn（els[i]，“动画化”{
开始：'mouseout'，
attributeType:'CSS'，attributeName:'fill'，
收件人：els[i].getAttribute（'fill'）| | computedStyle（els[i]，'fill'），
dur:dur，填充：“冻结”
});
}
}
函数createOn（el、名称、属性）{
var e=el.appendChild（document.createElements（el.namespaceURI，name））；
for（attrs中的var name）e.setAttribute（name，attrs[name]）；
返回e；
}
函数computedStyle（el，名称）{
return document.defaultView.getComputedStyle（el，null）[name]；
}
是否使用“值”和“关键时间”属性
是否使用“值”和“关键时间”属性
Repro cases：（在Safari和Firefox上都是如此）感谢您验证它在Safari中也不起作用；我刚刚在Opera和Chrome上进行了测试，我在那里也得到了同样的行为；我刚刚在Opera和Chrome上进行了测试，我在那里也得到了同样的表现；有没有想过如何在不事先知道初始颜色的情况下恢复？yasashiku个人认为，我只是想控制颜色或（更简单）根据属性动态创建
元素。如果这是你的一个选择（如果JS可用）并且你需要帮助，我可以用细节修改我的答案……不管怎样，我已经创建了一个示例并编辑了这个问题。有希望地
<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>
<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>
<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>