黒の塗りつぶしなしで SVG 円に背景画像を追加するにはどうすればよいですか?

SVG 円形に背景画像を追加する方法 (黒く塗りつぶさずに)

画像の背景を持つ SVG 円を作成するには、 SVGパターンを使用して可能です。実装方法は次のとおりです:

問題:

次の SVG コードは円に背景画像を追加しようとしますが、代わりに円を黒で塗りつぶします。

<circle ... fill="url('images/word-cloud.png')"></circle>

解決策:

を使用するには画像の塗りつぶし、SVG パターンが使用されます:

<svg ...>
  <defs>
    <pattern></pattern></defs></svg>

説明:

• を定義します。 内の要素
• タグを使用して画像を埋め込みます。

背景画像を適用するには、円の fill 属性を使用してパターンの ID を参照します。

例:

<svg ...>
  <defs>
    <pattern></pattern></defs></svg>

ID「top」のサークルに背景画像を追加:

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