SVG パターンを使用して PNG 画像で円を塗りつぶす方法

SVG パターンを使用して PNG 画像塗りつぶしのある円を作成する

SVG ドキュメントでは、画像パターンで図形を塗りつぶすことができます。ただし、以下のように「fill」属性を使用して円を画像で塗りつぶそうとすると、円の領域全体が単色で塗りつぶされる可能性があります。

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

画像の塗りつぶしを実現するには、 SVGパターンを利用することができます。 pattern 要素は、他の要素の fill プロパティで参照できる再利用可能なグラフィックを定義します。コンテンツとして画像を含むパターンを定義することで、希望の画像を塗りつぶした円を作成できます。

例を次に示します:

<svg width="700" height="660">
  <defs>
    <pattern></pattern></defs></svg>

このコードでは、パターンは次のように定義されています。 をラップします。 の周囲の要素 内の要素要素。パターンの id 属性は「image」に設定されます。 patternUnits 属性は、パターンがユーザー空間単位を使用することを指定し、画像が引き伸ばされたり歪んだりしないようにします。

circle 要素内では、fill 属性が「image」パターンを参照するように設定されます。その結果、円はパターンの の "xlink:href" 属性で指定された画像で塗りつぶされます。

このアプローチにより、円内での画像の位置決めや拡大縮小など、画像の塗りつぶしを柔軟に制御できます。

以上がSVG パターンを使用して PNG 画像で円を塗りつぶす方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。