SVG文本路径渲染会在具有尖角的文本路径上严重破坏单词

时间:2013-06-03 12:05:02

标签: svg

(nb从SVG textpath text layout on complex, changing paths分支,因为第一个问题已经解决,我无法管理两个单独的答案)

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

我有一个不断变化的svg路径(通过在d3中形成的节点周围形成一个船体来定义顶点,强制驱动所以节点不断移动,并且边界船体移动以容纳节点)

因为我无法预测顶点,也不知道文本是什么(因为它取决于那种情况下节点的分组,哪些更改)我所能做的就是盲目地将文本路径上的文本应用到路径。问题是有时文本显示不好。我得到了分解的文字字形 - 当一个角落形成时,文字有分裂的倾向。我不认为我使用dy将文本推到边界外有帮助(路径实际上是紧密的节点,我应用40个笔划宽度来给出一些填充:dy将文本推到该笔划之外)

例如(图片):

enter image description here

关于我可以采取哪些措施来解决这个问题?我的想法是,行程宽度不在那里,它会在一个尖点周围分裂,这是有道理的。对于笔划宽度,它不考虑有效曲线。

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

- 克里斯

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/

0 个答案:

没有答案