animation - 如何将路径数据变形为 SVG 中的另一个路径数据?
问题描述
我试图弄清楚为什么它不会将此路径数据变形为另一个路径数据,我需要让它看起来像一个真实的动画。
这是我的 SMIL 代码:
<animate xlink:href="#Barra3"
repeatCount="indefinite"
attributeName="d"
dur="5s"
values="M52,346L56,346C61.523,346 66,350.477 66,356L42,356C42,350.477 46.477,346 52,346Z;
M54,225C60.627,225 66,230.373 66,237L66,356L42,356L42,237C42,230.373 47.373,225 54,225Z;"/>
这是我的代码笔:
https://codepen.io/joannesalfa/pen/mdPBJxq 并转到第 181 行。我正在使用 SMIL。
解决方案
尝试在 svg 中变形路径时最重要的是 d 属性 hes 具有相同数量的命令和相同的命令。我已经重写了短路径,以便绘制形状侧面的线条的长度 = 0。
M54,346 C60.627,346,66,351.373,66,358 L66,358 L42,358L42,358 C42,351.373,47.373,346,54,346Z _ _ _
请看一下:
svg{border:solid}
<svg viewBox="5 200 100 200" width="100">
<path d="M54,346
C60.627,346,66,351.373,66,358
L66,358L42,358L42,358
C42,351.373,47.373,346,54,346Z" stroke="red" fill="gold" >
<animate dur='5s'
attributeType="XML"
attributeName='d'
repeatCount='indefinite'
values="M54,225
C60.627,225 66,230.373 66,236
L66,356L42,356L42,236
C42,230.373 47.373,225 54,225Z;
M54,346
C60.627,346,66,351.373,66,356
L66,356L42,356L42,356
C42,351.373,47.373,346,54,346Z;
M54,225
C60.627,225 66,230.373 66,236
L66,356L42,356L42,236
C42,230.373 47.373,225 54,225Z" />
</path>
</svg>
更新
OP正在评论:
您介意如何逐步重写短路径吗?我觉得这让我很困惑
我正在采用这两条路径,并将它们分成 5 条不同颜色的路径,每个命令一个。请注意,我必须在每条路径的开头添加对命令 (M) 的移动。移动到的值是前一个路径的最后一个点。线条,是蓝色的路径。
对于短路径,您可以在代码中看到那些蓝色路径,但在 svg 中看不到,因为它们的长度为 0。我需要那些长度为 0 的行,因为您在长路径中有行。
svg{width:200px;border:solid;overflow:visible; fill:none}
<svg viewBox="40 220 28 140" >
<desc>The short path</desc>
<path d="M54,346 C60.627,346,66,351.373,66,356" stroke="red" />
<path d="M66,356 L66,356" stroke="blue" />
<path d="M66,356 L42,356" stroke="green" />
<path d="M42,356 L42,356" stroke="blue" />
<path d="M42,356 C42,351.373,47.373,346,54,346" stroke="gold"/>
</svg>
<svg viewBox="40 220 28 140" >
<desc>The long path</desc>
<path d="M54,225 C60.627,225 66,230.373 66,237" stroke="red"/>
<path d="M66,237 L66,356" stroke="blue" />
<path d="M66,356 L42,356" stroke="green" />
<path d="M42,356 L42,237" stroke="blue"/>
<path d="M42,237 C42,230.373 47.373,225 54,225;" stroke="gold"/>
</svg>
推荐阅读
- php - 页面 mim 类型 png - 上传/打开对话框加载 php/文本文件
- ubuntu - 如何在 ROS 凉亭中加载 kuka iiwa R820?
- swift - 使用 Swift 取消选择任务控制上的窗口
- python - 如何使用 Miniconda 创建纯 Python 虚拟环境?
- laravel-blade - 使用刀片 (Livewire) 调用动态内容
- lua - 如何在 ROBLOX 中找到零件表面的 2D 区域?
- td-engine - 使用TDengine时如何知道表在哪个vnode?
- flutter - 为什么有时我不能在 dart 文件中使用术语,而在其他 dart 文件中我可以使用该术语?
- c# - 我需要添加什么来使用 LineCounter 为 textBox1 输入自动更新 textBox2?
- r - 过滤条件,除了指定行给定行索引号 dplyr