曲线上的字母间距 SVG 使用 D3 使字母倾斜
当我将 letter-spacing 样式添加到 D3 中路径上的文本时，它会倾斜字母，并且它们不再很好地遵循圆圈（请参见图像 2 上突出显示的字母）
你可以看到我的此笔记本中的 D3 代码
我尝试在 InkScape 中执行此操作，看起来它以不同的方式处理字母间距（参见图 3）
inkscape 中文本的样式is
font-size:17.6389px;line-height:1.25;text-align:center;text-decoration-color:#000000;letter-spacing:5.29167px;writing-mode:vertical-lr;text-anchor:middle;white-space:pre;fill:#990000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.77953;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers;stop-color:#000000
和 textPath is
font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:17.6389px;font-family:Arial;-inkscape-font-specification:Arial
我尝试使用其中一些属性，但在 D3 中无法获得相同的结果。我希望字母像 InkScape 中那样直，
谢谢您的帮助。
When I add letter-spacing style to my text on path in D3, it tilts the letters and they don't follow nicely the circle anymore (see highlighted letters on image 2)
You can see my D3 code in this notebook
I've tried to do it in InkScape and it looks like it handles the letter-spacing differently (see image 3)
The style in the inkscape for the text is
font-size:17.6389px;line-height:1.25;text-align:center;text-decoration-color:#000000;letter-spacing:5.29167px;writing-mode:vertical-lr;text-anchor:middle;white-space:pre;fill:#990000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.77953;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers;stop-color:#000000
and for textPath is
font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:17.6389px;font-family:Arial;-inkscape-font-specification:Arial
I've tried to use some of these attributes, but I cannot get the same result in D3. I would like the letters to be straight as in InkScape
Thanks for your help.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
使用要对称倾斜的
letter-spacing属性可能无法将字母居中。我最终创建了一个函数，在每个字符之间添加不可破坏的空格
d.data.split("").join("\xa0".repeat(d.space))其中d.data是文本，d.space是每个字母之间的空格数。现在这对我来说很好，并给出以下结果。It might be impossible to center the letter with the
letter-spacingattribute to be tilted symetrically.I ended up creating a function that add non-breakable spaces between every character
d.data.split("").join("\xa0".repeat(d.space))whered.datais the text andd.spaceis the number of spaces inbetween every letter. This is just good for me now and give the following result.