3

何らかの理由で、タグが閉じられtspanていても要素の位置が保持されます。tspan

<svg>
    <text x="50" y="50">1<tspan y="55" fill="red">2</tspan>3</text>
</svg>

http://jsfiddle.net/4fzqmeud/1/

との両方の数値は2、のみが 内にあるにもかかわらず3、配置の影響を受けます。ただし、属性によってはそうではありません。これは予期しない動作だと思います。tspan2tspanfill

の周りで別のものtspanを使用できることを知っています。しかし、これは非常に面倒なようです。さらに別の tspan を追加せずに、後に位置を「自動的に」リセットする方法はありますか?y="50"3tspan

4

3 に答える 3

4

tspan 要素の fill 属性は、スタイリング プロパティであるプレゼンテーション属性です。tspan 要素を離れると、スタイル設定は tspan に入る前の設定に戻ります。

tspan 要素の x/y/dx/dy 属性は、現在のテキスト位置を更新するために使用されます。現在のテキスト位置を tspan に入る前の設定に戻したくないでしょう。その場合、x 位置もリセットされ、tspan に続くテキストが tspan 要素のテキストと水平方向に重なります。

SVG 仕様には、下付き文字と上付き文字を処理するように設計されたベースライン シフト属性が含まれています。これはプレゼンテーション属性であるため、必要に応じて tspan にのみ影響します。この属性は、「サブ」、「スーパー」、数値、パーセントの値を持つことができます。例えば

   <svg>
        <text x="50" y="50">1<tspan baseline-shift="sub" fill="red">2</tspan>3</text>
    </svg>

ベースライン シフト属性は Chrome で機能します。残念ながら、IE は現在、baseline-shift 属性をサポートしていません。 https://msdn.microsoft.com/en-us/library/gg558060(v=vs.85).aspx

下付き文字をすべてのブラウザーで機能させるには、残念ながら、回避しようとしている 3 の周りに 2 番目の tspan を使用するという面倒なアプローチを使用する必要があるようです。

于 2015-11-14T17:43:28.457 に答える
1

How about just specifying multiple y positions in the outer text element. You could also write y="50 50 50" and then set a y="55" in the tspan if you wanted.

<svg>
    <text x="50" y="50 55 50">1<tspan fill="red">2</tspan>3</text>
</svg>

于 2015-11-14T21:31:20.760 に答える