SVG - Animate 不适用于类选择器答案

【问题标题】：SVG - Animate doesn't work with class selectorSVG - Animate 不适用于类选择器
【发布时间】：2015-01-14 21:54:51
【问题描述】：

我尝试为几行的“stroke-dashoffset”设置动画，我尝试使用 xlink:".class" 但它不起作用。该动画仅适用于 xlink:"#id" 正常吗？

<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g clip-path="url(#SVGID_2_)">
    <line id="LIGNE" class="LI"  stroke="#38519F"  x1="56.5" y1="127" x2="56.5" y2="77"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
    <line class="LI"  stroke="#38519F"  x1="59.5" y1="129" x2="59.5" y2="78"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
    <line class="LI"  stroke="#38519F"  x1="62.5" y1="131" x2="62.5" y2="80"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
    <line class="LI"  stroke="#38519F"  x1="65.5" y1="132" x2="65.5" y2="82"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
    <line class="LI"  stroke="#38519F"  x1="68.5" y1="134" x2="68.5" y2="83"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
    <line class="LI"  stroke="#38519F"  x1="71.5" y1="136" x2="71.5" y2="85"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
    <line class="LI"  stroke="#38519F"  x1="74.5" y1="138" x2="74.5" y2="87"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
    <line class="LI"  stroke="#38519F"  x1="77.5" y1="139" x2="77.5" y2="89"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
    <line class="LI"  stroke="#38519F"  x1="80.5" y1="141" x2="80.5" y2="90"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
    <line class="LI"  stroke="#38519F"  x1="83.5" y1="143" x2="83.5" y2="92"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
    <line class="LI"  stroke="#38519F"  x1="86.5" y1="144" x2="86.5" y2="94"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
    <line class="LI"  stroke="#38519F"  x1="89.5" y1="146" x2="89.5" y2="95"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
    <line class="LI"  stroke="#38519F"  x1="92.5" y1="148" x2="92.5" y2="97"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
    <line class="LI"  stroke="#38519F"  x1="95.5" y1="150" x2="95.5" y2="99"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
    <line class="LI"  stroke="#38519F"  x1="98.5" y1="151" x2="98.5" y2="101" stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
    <animate  xlink:href=".LI"  attributeType="xml" attributeName="stroke-dashoffset" from="200" to="0"  dur="0.5s" fill="freeze" />
</g></svg>

演示：http://jsfiddle.net/pierrearfarf/7L1kx6t6/1/

感谢阅读。

【问题讨论】：

这很正常。那是适合你的 SMIL。 w3c 正在制定一个新规范w3c.github.io/web-animations，但没有 UA 实现了足够多的规范来做你想做的事。
好的，谢谢您的回答。我很困惑，我应该使用 CSS 还是 Jquery，或者在这种情况下只需在 svg 中的每行添加一个标记？什么更有效率？

标签： animation svg

【解决方案1】：

您可以改用 css 动画，如下所示：

@-webkit-keyframes dashanim {
    from { stroke-dashoffset: 200; }
    to { stroke-dashoffset: 0 }
}
@-ms-keyframes dashanim {
    from { stroke-dashoffset: 200; }
    to { stroke-dashoffset: 0 }
}
@keyframes dashanim {
    from { stroke-dashoffset: 200; }
    to { stroke-dashoffset: 0 }
}
.LI {
    -webkit-animation-name: dashanim;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-fill-mode: forwards;
    
    -ms-animation-name: dashanim;
    -ms-animation-duration: 0.5s;
    -ms-animation-fill-mode: forwards;
    
    animation-name: dashanim;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
	<g clip-path="url(#SVGID_2_)">
		<line id="LIGNE" class="LI" fill="none" stroke="#38519F" stroke-miterlimit="10" x1="56.5" y1="127" x2="56.5" y2="77"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
		<line class="LI" fill="none" stroke="#38519F" stroke-miterlimit="10" x1="59.5" y1="129" x2="59.5" y2="78"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
		<line class="LI" fill="none" stroke="#38519F" stroke-miterlimit="10" x1="62.5" y1="131" x2="62.5" y2="80"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
		<line class="LI" fill="none" stroke="#38519F" stroke-miterlimit="10" x1="65.5" y1="132" x2="65.5" y2="82"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
		<line class="LI" fill="none" stroke="#38519F" stroke-miterlimit="10" x1="68.5" y1="134" x2="68.5" y2="83"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
		<line class="LI" fill="none" stroke="#38519F" stroke-miterlimit="10" x1="71.5" y1="136" x2="71.5" y2="85"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
		<line class="LI" fill="none" stroke="#38519F" stroke-miterlimit="10" x1="74.5" y1="138" x2="74.5" y2="87"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
		<line class="LI" fill="none" stroke="#38519F" stroke-miterlimit="10" x1="77.5" y1="139" x2="77.5" y2="89"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
		<line class="LI" fill="none" stroke="#38519F" stroke-miterlimit="10" x1="80.5" y1="141" x2="80.5" y2="90"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
		<line class="LI" fill="none" stroke="#38519F" stroke-miterlimit="10" x1="83.5" y1="143" x2="83.5" y2="92"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
		<line class="LI" fill="none" stroke="#38519F" stroke-miterlimit="10" x1="86.5" y1="144" x2="86.5" y2="94"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
		<line class="LI" fill="none" stroke="#38519F" stroke-miterlimit="10" x1="89.5" y1="146" x2="89.5" y2="95"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
		<line class="LI" fill="none" stroke="#38519F" stroke-miterlimit="10" x1="92.5" y1="148" x2="92.5" y2="97"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
		<line class="LI" fill="none" stroke="#38519F" stroke-miterlimit="10" x1="95.5" y1="150" x2="95.5" y2="99"  stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
		<line class="LI" fill="none" stroke="#38519F" stroke-miterlimit="10" x1="98.5" y1="151" x2="98.5" y2="101" stroke-width="1" stroke-dasharray="150 150" stroke-dashoffset="200"/>
	</g>
</svg>

【讨论】：