SVG textpath渲染在具有锐角的textpath上严重分解单词
（注意，第一个问题解决后，我无法找到两个单独的答案） 我不确定使用当前的SVG标准是否可以解决我遇到的问题，但我想我会在这里询问是否有人知道答案 我有一个不断变化的svg路径（顶点通过在d3中创建的节点周围形成外壳来定义，受力驱动，因此节点不断移动，边界外壳移动以容纳节点） 因为我无法预测顶点，也不知道文本将是什么（因为它取决于在这种情况下节点的分组，这会发生变化），所以我只能盲目地将文本路径上的文本应用于路径。问题是有时文本显示不好。我得到了分解的文本图示符-当一个角形成时，文本有分裂的趋势。我不认为我使用dy将文本推到边界之外会有帮助（路径实际上与节点紧密相连，我应用了40笔划宽度来提供一些填充：dy将文本推到该笔划之外） 例如（图片）： 我能做些什么来解决这个问题？我的想法是，笔划宽度不存在，它会围绕一个尖锐的点分裂，这有点道理。对于笔划宽度，它只是不考虑有效曲线 我可以影响渲染以阻止这种情况发生吗 --克里斯 svg代码供参考：SVG textpath渲染在具有锐角的textpath上严重分解单词,svg,Svg,（注意，第一个问题解决后，我无法找到两个单独的答案） 我不确定使用当前的SVG标准是否可以解决我遇到的问题，但我想我会在这里询问是否有人知道答案 我有一个不断变化的svg路径（顶点通过在d3中创建的节点周围形成外壳来定义，受力驱动，因此节点不断移动，边界外壳移动以容纳节点） 因为我无法预测顶点，也不知道文本将是什么（因为它取决于在这种情况下节点的分组，这会发生变化），所以我只能盲目地将文本路径上的文本应用于路径。问题是有时文本显示不好。我得到了分解的文本图示符-当一个角形成时，文本有分裂的趋势。
<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>
保护
DMZ
jsfiddle显示了这一点（移动节点以查看问题）也许您可以使用贝塞尔曲线或椭圆弧来避免尖锐的路径角。不过，你必须计算正确的曲线或圆弧参数。由于我的路径是由d3节点周围的严格外壳生成的，我怀疑我被卡在那里了，除非某种变换可以在d3生成的路径上运行，以生成没有锐角的辅助路径，在不影响性能的前提下，船体/路径每秒改变10秒。。。不过，我会给迈克·博斯托克发推特，看看他是否知道你是否可以用某种方式（比如更大的rander节点）来填充船体以避免这个问题