3

私が抱えている問題が現在のSVG標準を使用して解決できるかどうかはわかりませんが、誰かが答えを知っているなら、とにかくここで尋ねると思いました

私は絶えず変化するSVGパスを持っています（d3で作成されたノードの周りに船体を形成することによって定義された頂点、ノードが常に移動し、境界船体がノードに対応するように移動するように強制的に駆動されます）

頂点を予測することも、テキストがどうなるかもわからないため (状況が変化するノードのグループ化に依存するため)、テキストパス上のテキストをやみくもにパスに適用することしかできません。問題は、テキストがうまく表示されないことがあります。

問題 1: 上下逆さまのテキスト - パス上のどこにテキストが移動するかは気にしませんが、しばしば上下逆さまになってしまうのは面倒です

例（画像）：

ここに画像の説明を入力

[ SVG テキストパス レンダリングに分岐した NB 問題 2は、回答で示唆されているように、鋭い角を持つテキストパスで単語をひどく分割します]

問題 2: テキストの分割 - コーナーが形成されると、テキストが分割される傾向があります。上。dy を使用してテキストを境界の外に押し出すことは役に立たないと思います (パスは実際にはノードにタイトであり、パディングを与えるために 40 ストローク幅を適用します: dy はテキストをそのストロークの外に押し出しました)

例（画像）：

ここに画像の説明を入力

これを修正するために何ができるかについてのアイデアはありますか?

――クリス

参照用のsvgコード:

問題 1:

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

4

1 に答える 1

5

問題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 を質問することをお勧めします。

于 2013-06-03T10:21:38.617 に答える