SVG のテキストに背景色を追加するにはどうすればよいですか?

SVG でのテキストの背景の色付け

Web 開発者は、テキストを含む SVG 要素をカスタマイズしようとすることがよくあります。よくあるリクエストの 1 つは、CSS のbackground-color プロパティと同様に、テキストの背景に色を付ける機能です。ただし、ネイティブの fill プロパティはテキスト自体を変更するだけです。

考えられる解決策

SVG でテキストの背景を実現するには、フィルターの力を利用できます。以下に例を示します。

 <defs></p><pre class="brush:php;toolbar:false"><filter x="0" y="0" width="1" height="1">

実線背景

説明

<フィルタ>要素は、テキストの後ろに黄色の背景を作成するフィルター効果を定義します。 要素は背景の色を設定し、 要素は背景の色を設定します。背景と元のテキストを組み合わせます。 に適用すると、要素に filter 属性を使用すると、背景色がテキストの後ろに表示されます。

以上がSVG のテキストに背景色を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。