1. ホーム
  2. text

[解決済み】SVG:矩形内のテキスト

2022-04-09 22:37:52

質問

あるテキストを表示したい 内側 SVG rect . 可能ですか?

試してみた

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="0" y="0" width="100" height="100" fill="red">
      <text x="0" y="10" font-family="Verdana" font-size="55" fill="blue"> Hello </text>
    </rect>
  </g>
</svg>

しかし、うまくいきません。

どうすればいいですか?

これは不可能です。 テキストを矩形要素の中に表示したい場合は、両者をグループ化し、text要素を矩形要素の後に置く必要があります(そうすれば、text要素が一番上に表示されます)。

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="0" y="0" width="100" height="100" fill="red"></rect>
    <text x="0" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text>
  </g>
</svg>