SVG动画图箭
SVG动画图箭
提问于 2016-11-30 20:19:17
这是我第一次使用SVG，我想知道是否可以用箭头创建一个动画线条图。我已经找到了多个没有箭头的动画线条图、带有箭头的非动画直线图和带有箭头的动画直线的例子，但不是我所要寻找的。我已经附上了一些代码熟练的例子，我一直在玩下面。有人知道这是否可能/有解决办法吗？非常感谢！
- 动画线缺失箭头(需要箭头)：http://codepen.io/alexandraleigh/pen/jVaObdHTML #CSS(较少)@导入"lesshat"；@深灰色：#303030；*{框大小:边框框；}主体{背景：@深灰色；} .graph__wrapper{宽度:400 0px；边距:30 0px自动；位置:相对；svg{位置:绝对；边距:36px0px0px15px；} .path {行程-dasharray: 1000；笔画-dashoffset: 1000；动画: dash 3s轻松-在前进；动画-迭代-计数: 1；动画-延迟: 1s；}@关键帧破折号{{行程-dashoffset: 0；} .description{字体族："Roboto"；颜色:亮(@深灰色，50%)；文本-对齐:中心；边距:40 px0px；}}
- 带有箭头的动画直线(需要在路径上的多个点停止)：http://codepen.io/alexandraleigh/pen/yVPYrY
- 我尝试将路径描述从#1添加到#2，它有所需的最终图形，只是没有动画：http://codepen.io/alexandraleigh/pen/pNdgWR
- 我还尝试将箭头标记从#2添加到#1，但是箭头没有动画：http://codepen.io/alexandraleigh/pen/aBVdVY
我也愿意使用像http://snapsvg.io/这样的插件，但是还没有看到任何有用的例子来帮助我的情况。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-12-02 05:42:01
您可以使用偏移运动(旧语法:运动路径)来实现这一点。请注意，这是一个高度实验性的特征。它目前只适用于Chrome。更重要的是，我在这里使用的是“旧”语法，因为这是目前的铬，但它将很快切换到新的系统.
* {
box-sizing: border-box;
}
body {
background: #303030;
}
.graph__wrapper {
width: 400px;
margin: 30px auto;
position: relative;
svg {
position: absolute;
margin: 36px 0px 0px 15px;
}
}
.path {
stroke-dasharray: 428;
stroke-dashoffset: 428;
animation: dash 3s ease-in forwards;
animation-iteration-count: 1;
animation-delay: 1s;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@keyframes pm {
from {
motion-offset: 0%;
}
to {
motion-offset: 100%
}
}
#arrow {
animation: pm 3s ease-in forwards;
animation-iteration-count: 1;
animation-delay: 1s;
motion-path: path('M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844');
motion-rotation: auto;
motion-anchor: center;
}
.description {
font-family: "Roboto";
color: lighten(@darkgrey, 50%);
text-align: center;
margin: 40px 0px;
}<div class="graph__wrapper">
<svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1" style="overflow:visible">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844"
id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path>
<polyline id="arrow" points="0,-5 10,0 0,5 1,0" fill="white" />
</g>
</svg>
</div>
你也可以用animateMotion做这件事，但是svg动画很快就会被降价。您将不得不以任何方式重写代码：
* {
box-sizing: border-box;
}
body {
background: #303030;
}
.graph__wrapper {
width: 400px;
margin: 30px auto;
position: relative;
svg {
position: absolute;
margin: 36px 0px 0px 15px;
}
}
.path {
stroke-dasharray: 428;
stroke-dashoffset: 428;
animation: dash 3s linear forwards;
animation-iteration-count: 1;
animation-delay: 1s;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.description {
font-family: "Roboto";
color: lighten(@darkgrey, 50%);
text-align: center;
margin: 40px 0px;
}<div class="graph__wrapper">
<svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1" style="overflow:visible">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844"
id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path>
<polyline id="arrow" points="0,-5 10,0 0,5 1,0" fill="white">
<animateMotion rotate="auto" begin="1s" dur="3s" repeatCount="1" fill="freeze">
<mpath xlink:href="#Path-1" />
</animateMotion>
</polyline>
</g>
</svg>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40897422
复制相关文章
相似问题
腾讯云开发者
