我的图表上有一条路径,也是textPath沿着这条路径发短信。但是文本非常坚持或接近这条道路。如何在文本和路径之间添加一些填充。这样文本可以稍微远离路径。它会让我的图表看起来更好。
答案 0 :(得分:1)
您可以使用dx
元素的dy
或<text>
属性轻推文本位置。例如,yourTextElementSelection.attr('dy', -10)
会将文本移动10个单位。
答案 1 :(得分:0)
只是为了补充 jshanley 的答案。
下面是展示的代码,通过添加“dy”属性,我们可以在路径和文本之间添加空格。
<svg width="260" height="250" viewBox="0 0 260 250">
<text dy="10%">
<textPath xlink:href="#curve" side="right">
Example Text
</textPath>
</text>
<path id="curve"
d="
M 130, 150
m -90, 0
a 90,90 0 1,0 180,0
a 90,90 0 1,0 -180,0
"
/>
</svg>