SVG 路径和变形

标签 svg point bezier morphing svg-morphing

我有一些理论问题。 假设我在 svg 中有 2 条路径。每个都有不同的点数。一条有 4 条贝塞尔曲线,另一条有 3 条。

我想做的是将一种转变为另一种。 现在,我知道它们必须具有完全相同的结构和相同的点数才能做到这一点。

那么,问题是,我可以在它们的路径中添加“虚拟点”以获得相同的结构和点数量,而不改变对象的形状吗?

例如,在一条路径中取一个点,然后在其后添加相同的点以增加点数。或者在两条路径中创建一条贝塞尔曲线,该曲线实际上假装是一条直线而不是一条曲线。这会改变对象吗?如果我在 x=1 y=1 和 x=4 y=4 上有点,使用这种形式会使贝塞尔曲线成为一条线吗? (M1 1C1 1 4 4 4 4)

最佳答案

想通了。在同一直线上的任意位置使用控制点作为坐标,可以将贝塞尔曲线转换为直线,如果使用同一点作为控制点、起始坐标和结束坐标,则可以将曲线转换为点。将更多这些点添加到路径中不会改变对象的外观,只是将更多数据添加到路径中。

http://www.petercollingridge.co.uk/book/export/html/560

在三次曲线下方,您可以按照描述的方式对齐点以获得所需的结果

关于SVG 路径和变形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32391814/

相关文章:

html - SVG 的 CSS 是 "standard"CSS 吗?

HTML/CSS 跨浏览器与 SVG 不一致

java - 从数组中删除点并返回新数组 - Java

c++ - 如何将 vector <cv::Point2d> 转换为 vector <cv::Point>?

delphi - 方向角或将3D角指向空间中的位置

css - 如何使用 CSS 将内联 SVG 缩放到父元素

svg - 使用 React 创建交互式 SVG 组件

svg - 自行车车轮路径和贝塞尔曲线

swift - 如何在 Swift 中不旋转 Sprite 的情况下在曲线中移动 SKSpriteNode

raphael - 在 raphael js 中绘制中心弧