复杂多变路径上的 SVG 文本路径文本布局

Question

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

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

因为我无法预测顶点，也不知道文本会是什么(因为它取决于节点在那种情况下的分组，会发生变化)我所能做的就是盲目地将文本路径上的文本应用到小路。问题是有时文本显示效果不佳。

问题 1:颠倒的文本 - 我不介意文本在路径上的位置，但令人讨厌的是它经常以颠倒的方式结束

例如(图片):

[NB 问题 2 分支到 SVG textpath rendering breaks words up badly on a textpath with sharp corners正如答案中所建议的那样]

问题 2: splinter 的文本 - 当角形成时，文本有 split 的趋势。向上。我不认为我使用 dy 将文本推到边界外有帮助(路径实际上对节点很紧，我应用 40 stroke-width 来提供一些填充:dy 将文本推到该笔划之外)

例如(图片):

关于我可以做些什么来解决这个问题有什么想法吗？

--克里斯

引用svg代码:

问题一:

<g id="hull_elements">
<path class="boundary" id="Secure"     d="M219.31353652066463,309.7274362305448L199.3259715998452,277.60331505353355L54.5215284230899,92.9756148805194L29.418010605669316,64.72387260525474Z" style="fill: #b0c4de; stroke: #b0c4de; stroke-width: 40px; stroke-linejoin: round;"></path>
<path class="boundary" id="DMZ" d="M234.7675515627913,79.25604751762172L122.76947855325542,190.1418483839412L271.90702281166267,76.40758102069142Z" 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>

问题2:

<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/

[编辑添加问题 2 分支的 NB - zuzzy]

Answer 1

对于问题 1，我认为您需要检测 x 坐标何时向左移动，并在这种情况下从后向前绘制路径。

如果你有

M 0,0 L 100, 0

没关系 100 > 0 所以保持原样。但是

M 100, 0 L 0,0

有 0 < 100，因此需要反转。在这种情况下，反转会给我们第一种情况下的路径。

这是一个完整的例子。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="MyPath"
          d="M 300 200 
             L 100 200" />
    <path id="MyPathReversed"
          d="M 100 200 
             L 300 200" />
  </defs>
  <desc>Example toap01 - simple text on a path</desc>

  <g transform="translate(0, 100)">
    <text font-family="Verdana" font-size="42.5" fill="blue" >
      <textPath xlink:href="#MyPath">
        upside down
      </textPath>
    </text>
  </g>

  <text font-family="Verdana" font-size="42.5" fill="blue" >
    <textPath xlink:href="#MyPathReversed">
      right way up
    </textPath>
  </text>

</svg>

顺便说一句，我建议您将问题 2 作为一个单独的问题提出。