我有一个复杂的 SVG 路径，它由许多用 M#、#L#、#M#、#L#、# 定义的段组成。我想为这条路径的绘图设置动画，但要按照它们列出的顺序。我已经尝试过这里列出的解决方案：Can't make path draw grows slow with D3，但它们并行绘制路径的每一段。我该如何修改它以便它们按顺序动画？
问问题
835 次
2 回答
2
D3 过渡具有delay()允许您指定何时开始动画的功能。您可以使用它在绘制之前的路径段之后开始绘制连续的路径段。您还可以使用转换end事件在前一个转换完成后开始下一个转换。这样，您甚至不必指定延迟。
或者，您可以在没有 Javascript 的情况下为 SVG 本身的路径设置动画。有关此示例，请参见此处。您需要做的基本上就是将一个animate元素附加到path告诉它如何绘制它的元素。
于 2013-07-06T19:35:19.170 回答
1
我在白板动画应用程序中遇到了这个问题。如果您的 SVG 文件在一个<path>元素内有一个包含多个移动 (M#) 段的路径，则并行动画是不可避免的。
您需要做的是分解<path>元素内的移动命令 (M) 并将它们存储到单独的元素中。
要么指示你的图形艺术家这样做，要么编写一个简单的解析器来在将 SVG 文件加载到 DOM 之前重建它。
例如，这个在<path>元素中包含多个移动命令的 svg 文件将同时绘制所有线段。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="792px" height="612px" viewBox="0 0 792 612" enable-background="new 0 0 792 612" xml:space="preserve">
<g>
<path d="M184.258,256.649c1.309-1.742,2.541-3.093,3.696-4.184c-4.34-7.825-10.576-17.045-12.287-29.926
c-1.667,21.723-7.667,27.647-7,37.191c0.537,7.686,4.105,13.873,10.521,17.196C178.836,270.993,179.51,262.968,184.258,256.649zM204.334,239.325c-5.241,12.075-8.956,9.837-14.921,15.876c-0.864,0.875-1.775,1.922-2.746,3.213
c-4.61,6.135-4.88,14.29-4.363,19.82c0.342,3.666,1.03,6.181,1.03,6.181C202.334,273.554,206.334,247.225,204.334,239.325zM205.477,208.486c0.602-0.338,1.204-0.661,1.803-0.97c-0.694-0.353-1.444-0.719-2.279-1.104
c-15-6.911-12.667-21.393-12.667-21.393c-16.355,19.708-12.421,38.267-6.032,47.368
C188.276,222.657,194.783,214.486,205.477,208.486zM210.415,209.276c-9.472,4.503-20.029,12.519-21.569,26.141c-0.165,1.458-0.233,2.977-0.179,4.566
c0,0,6.64-0.937,14.51-5.51c0.858-0.5,1.729-1.037,2.61-1.626c7.728-5.17,16.045-13.95,20.214-28.738
C226,204.108,218.617,205.377,210.415,209.276zM177.84,319.268c-1.606-4.102-3.152-10.643-1.438-18.681c0.966-4.531,2.632-6.883,4.521-8.441
c-6.775-6.099-16.252-16.29-16.252-16.29s-2,11.19,2.333,30.938C169.349,317.476,174.032,319.582,177.84,319.268z"/>
</g>
</svg>
下一个 svg 文件将按顺序绘制每个段。当然，您必须编写动画代码以一次为一条路径设置动画。如果它们都在路径元素内，这是不可能的。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="792px" height="612px" viewBox="0 0 792 612" enable-background="new 0 0 792 612" xml:space="preserve">
<g>
<path d="M184.258,256.649c1.309-1.742,2.541-3.093,3.696-4.184c-4.34-7.825-10.576-17.045-12.287-29.926
c-1.667,21.723-7.667,27.647-7,37.191c0.537,7.686,4.105,13.873,10.521,17.196C178.836,270.993,179.51,262.968,184.258,256.649z
"/>
<path d="M204.334,239.325c-5.241,12.075-8.956,9.837-14.921,15.876c-0.864,0.875-1.775,1.922-2.746,3.213
c-4.61,6.135-4.88,14.29-4.363,19.82c0.342,3.666,1.03,6.181,1.03,6.181C202.334,273.554,206.334,247.225,204.334,239.325z"/>
<path d="M205.477,208.486c0.602-0.338,1.204-0.661,1.803-0.97c-0.694-0.353-1.444-0.719-2.279-1.104
c-15-6.911-12.667-21.393-12.667-21.393c-16.355,19.708-12.421,38.267-6.032,47.368
C188.276,222.657,194.783,214.486,205.477,208.486z"/>
<path d="M210.415,209.276c-9.472,4.503-20.029,12.519-21.569,26.141c-0.165,1.458-0.233,2.977-0.179,4.566
c0,0,6.64-0.937,14.51-5.51c0.858-0.5,1.729-1.037,2.61-1.626c7.728-5.17,16.045-13.95,20.214-28.738
C226,204.108,218.617,205.377,210.415,209.276z"/>
<path d="M177.84,319.268c-1.606-4.102-3.152-10.643-1.438-18.681c0.966-4.531,2.632-6.883,4.521-8.441
c-6.775-6.099-16.252-16.29-16.252-16.29s-2,11.19,2.333,30.938C169.349,317.476,174.032,319.582,177.84,319.268z"/>
</g>
</svg>
于 2015-08-08T01:17:56.740 回答