(nbは複雑な SVG textpath テキスト レイアウトから分岐し、最初の問題が解決されたためパスを変更し、2 つの個別の回答を管理できません)
私が抱えている問題が現在の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/