根据这个话题:
以及这个话题:
SVG标签“animateTransform”效果不佳。将SMIL(animate标签)替换为CSS或CSS转换会更好。
CONSOLE WARNING: Please use CSS animations or Web animations instead),
which would work fast on the latest versions of Firefox and Chrome.
下一个谷歌Chrome浏览器的警告:CONSOLE WARNING: SVG's SMIL animations ('animate', 'set', etc.) are deprecated
and will be removed. Please use CSS animations or Web animations instead.
首先,我需要实现三件事:
1)鼠标悬停时的悬停效果(最简单的)
它是这样的:
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<!--it makes half-visible selecting effect -->
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
<!-- explicitly reverse the opacity animation on mouseout -->
<set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>
</rect>
我去掉了set
标签,给rect
标签添加了类,并将其添加到CSS的悬停伪类中:
.element_tpl:hover {
stroke-opacity: 0.5;
}
2) 更改提交到此元素后(页面加载),它会扩展几次
原来的样子:
<!--animation-->
<!--it scales a few times after change committed to this element -->
<animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.12;1.12;1" repeatCount="6" fill="freeze"/>
如何在没有 animate
标签的情况下进行组织:
???
3) 点击后它会动态缩放(scale up 和 scale down)
以前的做法:
<!--it animates scale up and scale down onclick -->
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s" fill="freeze"/>
如何在没有 animate
标签的情况下进行组织?尝试使用 :active
,但其行为存在差异:
.element_tpl:active {
transform: scale(1.1);
}
这是我的模板元素的完整代码:
<g id="switcher" cursor="pointer" stroke-width="0.15">
<g transform="scale(1,1.375)">
<g>
<rect x="-0.5" y="-0.5" width="1" height="1" stroke="white" pointer-events="none"/>
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<!--it makes half-visible selecting effect -->
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
<!-- explicitly reverse the opacity animation on mouseout -->
<set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>
</rect>
<line x1="0" y1="-0.25" x2="0" y2="0.25" stroke-width="0.17" stroke-linecap="round" pointer-events="none"/><!-- vertical on -->
<!--animation-->
<!--it scales a few times after change committed to this element -->
<animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.12;1.12;1" repeatCount="6" fill="freeze"/>
<!--it animates scale up and scale down onclick -->
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s"
fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s"
fill="freeze"/>
</g>
</g>
</g>
我当前工作项目中的可工作版本如下:
http://jsfiddle.net/7e2jeet0(之前仅由Firefox浏览器使用 - 因为(请注意)此处的鼠标悬停效果通过两个图形实现 - 原因是[Chrome支持SMIL和'use'一起使用,而Firefox当前不支持SMIL和'use'一起使用]/根据Robert Longson的说法)
我尝试制作等效的CSS样式,如下:
http://jsfiddle.net/7e2jeet0/1/(在Firefox中)
http://jsfiddle.net/7e2jeet0/2/(在Chrome中)
或其他元素也可做相同处理。可工作版本如下:
谢谢!
编辑1
我发现这个组合变体在Firefox中可以很好地实现悬停和鼠标按下效果,但在Chrome中仅能实现悬停效果。
我还想知道如何通过转换到CSS / Web动画来保存这些动画: