文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >SVG - Animate不适用于类选择器

问SVG - Animate不适用于类选择器
EN

Stack Overflow用户
提问于 2015-01-13 14:22:52
回答 1查看 159关注 0票数 0

我尝试使用xlink:".class“来为几行代码的”笔划划线集“添加动画效果，但它不起作用。动画只适用于xlink:"#id“是否正常？

代码语言：javascript
复制
<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/

Thx用于阅读。

animation
svg
EN

回答 1

Stack Overflow用户

发布于 2015-01-14 21:54:51

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

​

代码语言：javascript
复制
@-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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/27916054

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档