贝塞尔曲线计算SVG路径上的控制点

时间:2017-01-03 15:43:50

标签: javascript html svg

我正在尝试在路径上的某个位置向SVG路径添加一个点。

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M 48 241 C 50 13 129 26 130 238 C 138 521 214 431 220 228 C 237 65 288 -18 316 240" stroke="black" fill="transparent"/>
</svg>​

此外,我想在路径(曲线)中添加一个点,以便路径(曲线)不会变形。
关键是例如“C x1 y1 x2 y2 210 331”。
我的问题: 如何确定控件x1 y1 x2 y2?
例如。 “C 100 100 100 500 210 331”错误,因为曲线会变形。

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d= "M 48 241 C 50 13 129 26 130 238 C 100 100 100 500 210 331 C 210 331 210 331 220 228 C 237 65 288 -18 316 240" stroke="black" fill="transparent"/>
</svg>

换句话说,给出了点(x = 210,y = 331)。通缉控制“x1 y1 x2 y2”。

See here for more explanation (为了在“stackoverflow.com”中添加图形,需要一些点。但是我没有足够的分数,因此我插入了一个链接)
提前谢谢。

0 个答案:

没有答案