d3.js 曲线上的字母间距SVG使用D3使字母倾斜

b4qexyjb  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(160)

当我在D3中的路径上添加letter-spacing样式时,它使字母倾斜,它们不再很好地跟随圆圈(见图2中突出显示的字母)
第一次
您可以看到my D3 code in this notebook
我试过在InkScape中这样做,它似乎处理字母间距的方式不同(见图3)。

文本的墨迹样式为

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则为

font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:17.6389px;font-family:Arial;-inkscape-font-specification:Arial

我尝试过使用其中的一些属性,但是在D3中无法得到相同的结果。
谢谢你的帮助。

at0kjp5o

at0kjp5o1#

可能无法将具有letter-spacing属性的字母居中对称倾斜。
最后我创建了一个函数,在每个字符d.data.split("").join("\xa0".repeat(d.space))之间添加不可断开的空格,其中d.data是文本,d.space是每个字母之间的空格数。

相关问题