0

text要素内ではtspan、テキストの特定の部分にスタイルを設定できます。

html, body, svg
{
  width       : 100%;
  height      : 100%;
  margin      : 0;
  background  : black;
}

text
{
  font-size : 100px;
  fill      : white;
}
<svg>
  <text y='100'>
    A <tspan>test</tspan>
  </text>
</svg>

tspan、テキストの後に正しく配置されています。

標準tspan位置

ただし、位置font-sizeを超える200pxと、動作が異なります。

tspan の位置が正しくない

の内容textも影響を受けます。ご希望の方は、ご自身で検査可能です。

html, body, svg
{
  width       : 100%;
  height      : 100%;
  margin      : 0;
  background  : black;
}

text
{
  font-size : 250px;
  fill      : white
}
<svg>
  <text y='200'>
    A <tspan>test</tspan>
  </text>
</svg>

フォントが大きいほど、差が大きくなります。font-sizeこれがatの結果です400px

大きなフォントでの tspan 位置の誤り

相対単位(emおよび%) はテスト済みです。 他のにtext関連する要素( a) もテストされています。

4

0 に答える 0