How to Fill a Circle with a PNG Image Using SVG Patterns?

Using SVG Patterns to Create a Circle with a PNG Image Fill

In an SVG document, it's possible to fill shapes with an image pattern. However, when attempting to fill a circle with an image using the "fill" attribute as below, it might result in the entire circle area being filled with a solid color:

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

To achieve an image fill, SVG patterns can be utilized. A pattern element defines a reusable graphic that can be referenced in the fill property of other elements. By defining a pattern with an image as the content, we can create a circle with the desired image fill.

Here's an example:

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

In this code, a pattern is defined by wrapping the element around the element within the element. The id attribute of the pattern is set to "image." The patternUnits attribute specifies that the pattern will use user space units, ensuring that the image is not stretched or distorted.

Within the circle element, the fill attribute is set to reference the "image" pattern. As a result, the circle will be filled with the image specified in the "xlink:href" attribute of the pattern's element.

This approach allows for flexible control of the image fill, including positioning and scaling of the image within the circle.

The above is the detailed content of How to Fill a Circle with a PNG Image Using SVG Patterns?. For more information, please follow other related articles on the PHP Chinese website!