英文:
Unexpected result converting absolute SVG 'C' command to relative 'c'
问题
我尝试将绝对C命令转换为相对c坐标，用于SVG路径d属性字符串中的三次贝塞尔曲线，以获得相同的结果。
在这个测试中，两个结果应该看起来相同。但它们并不相同。
一定有些我不明白的地方。
有人能解释我漏掉了什么吗？
我了解理论和C和c之间的区别。
在我看来，数字是正确的。结果却不是。
英文:
I tried to get the same result converting absolute C commands to relative c coordinates for cubic Bézier curves in a SVG-path d attribute string.
In this test, both results should look the same. They are not.
There must be something I don't understand.
Somebody can explain what I am missing?
I know the theory and the difference between both C and c.
In my eyes the numbers are okay. The result isn't.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg width="200" height="200" viewBox="50 100 200 200" xmlns="http://www.w3.org/2000/svg">
<g id="boom" stroke="green" stroke-width="0.75" fill="lightblue">
<path d="M 100,200 C 105,190 95,170 100,160 "/>
<path d="M 150,200 c 5,-10 -10,-20 5,-10 "/>
</g>
<g id="circles" stroke="none" fill="red">
<circle cx="105" cy="190" r="1"/>
<circle cx= "95" cy="170" r="1"/>
<circle cx="100" cy="160" r="1"/>
<circle cx="155" cy="190" r="1"/>
<circle cx="145" cy="170" r="1"/>
<circle cx="150" cy="160" r="1"/>
</g>
</svg>
<!-- end snippet -->
答案1
得分: 2
你的 x/y 计算有错误：
要从绝对值中减去的偏移量是相对于最后一个在路径上的位置/点的，所以控制点和最终点都相对于同一个已知路径点：
M 100 200
C 105 190 95 170 100 160 // (M: x:-100, y:-200)
C 105 140 95 130 100 110 // (preceding C: x:-100, y:-160)
变成了：
M 100 200
c 5 -10 -5 -30 0 -40
c 5 -20 -5 -30 0 -50
你已经减去了C命令的两个控制点的 x/y 值 - 这样是行不通的。
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
svg{
height:20em;
overflow:visible;
}
<!-- 语言: lang-html -->
<svg viewBox="98.56 110 2.89 90">
<path id="pathPrev"
d="M 100 200
C 105 190 95 170 100 160
C 105 140 95 130 100 110"
fill="none" stroke="#000000" stroke-width="1" ></path>
</svg>
<svg viewBox="98.56 110 2.89 90">
<path id="pathPrev"
d="M 100 200
c 5 -10 -5 -30 0 -40
c 5 -20 -5 -30 0 -50"
fill="none" stroke="#000000" stroke-width="1" ></path>
</svg>
<!-- 结束代码片段 -->
你可以使用在线工具来轻松验证你的计算，比如
英文:
Your x/y calculation has an error:
The offsets to subtract from absolute values are relative to the last on-path position/point, so both control points and the final point are all relative to the same last known path point:
M 100 200
C 105 190 95 170 100 160 // (M: x:-100, y:-200)
C 105 140 95 130 100 110 // (preceding C: x:-100, y:-160)
becomes:
M 100 200
c 5 -10 -5 -30 0 -40
c 5 -20 -5 -30 0 -50
You have subtracted the two control point x/y values of the C command – won't work.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
svg{
height:20em;
overflow:visible;
}
<!-- language: lang-html -->
<svg viewBox="98.56 110 2.89 90">
<path id="pathPrev"
d="M 100 200
C 105 190 95 170 100 160
C 105 140 95 130 100 110"
fill="none" stroke="#000000" stroke-width="1" ></path>
</svg>
<svg viewBox="98.56 110 2.89 90">
<path id="pathPrev"
d="M 100 200
c 5 -10 -5 -30 0 -40
c 5 -20 -5 -30 0 -50"
fill="none" stroke="#000000" stroke-width="1" ></path>
</svg>
<!-- end snippet -->
You can easily cross-check your calculations with online tools like
svg path editor
svg path commander (also usable as a library)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论