1

(nb 从复杂的 SVG textpath 文本布局分支,随着第一个问题的解决而改变路径,我无法管理两个单独的答案)

我不确定使用当前的 SVG 标准是否可以解决我遇到的问题,但我想无论如何我都会在这里问是否有人知道答案

我有一个不断变化的 svg 路径(通过在 d3 中制作的节点周围形成一个外壳定义的顶点,强制驱动,因此节点不断移动,边界外壳移动以容纳节点)

因为我无法预测顶点,也不知道文本将是什么(因为它取决于在那种情况下节点的分组,它会发生变化)我所能做的就是盲目地将文本路径上的文本应用于路径。问题是有时文本不能很好地显示。并且我得到了分解的文本字形 - 当一个角形成时,文本有分裂的趋势。我不认为我使用 dy 将文本推到边界之外有帮助(路径实际上对节点很紧,我应用 40 笔画宽度来提供一些填充:dy 将文本推到该笔画之外)

例如(图片):

在此处输入图像描述

关于我能做些什么来解决这个问题的任何想法?我的想法是没有笔画宽度,它会围绕一个尖点分裂,这有点道理。对于笔划宽度,它只是不考虑有效曲线。

我可以影响渲染以阻止这种情况发生吗?

- 克里斯

svg 代码供参考:

<g id="hull_elements"><path class="boundary" id="Secure" d="M30.716331539726912,88.02778447495649L66.8405337274694,100.01086904278971L251.78816229874747,53.214214251587265L277.8704519199028,25.642491075146587Z" style="fill: #b0c4de; stroke: #b0c4de; stroke-width: 40px; stroke-linejoin: round;"></path>
<path class="boundary" id="DMZ" d="M177.8575710153683,149.56053657599713L251.04637461899244,245.55658992744486L277.76418020025847,271.7261370009561L159.53295211932644,118.0340968521715Z" style="fill: #b0c4de; stroke: #b0c4de; stroke-width: 40px; stroke-linejoin: round;"></path>
</g>
<g id="hull_text">
<text dy="30"><textPath startOffset="0" text-anchor="start" method="align" spacing="auto" xlink:href="#Secure">Secure</textPath></text>
<text dy="30"><textPath startOffset="0" text-anchor="start" method="align" spacing="auto" xlink:href="#DMZ">DMZ</textPath></text>
</g>

jsfiddle 可以显示这一点(移动节点以查看问题)http://jsfiddle.net/zuzzy/GC2C2/

4

0 回答 0