CODEWITHSUNDEEP
javascripthtmlcsssvgsvg-filters
Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

SVG - Center image in circle without image fill

I have created a circle in SVG and trying to display image in circle and when the circle size is increased the image is also increasing but I wanted to have image same as it is, changing the circle size without changing the image size, currently its filling in the circle:

Here is the HTML code, can somebody please help

<svg id="graph" width="100%" height="400px">

  <!-- pattern -->
  <defs>
    <pattern id="image" x="0%" y="0%" height="100%" width="100%"
             viewBox="0 0 512 512">
      <image x="0%" y="0%" width="512" height="512" xlink:href="https://ppcaxis.com/cat-150.jpg"></image>
    </pattern>
  </defs>
    
  <circle id="sd" class="medium" cx="5%" cy="40%" r="5%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
  <circle id="sd2" class="medium" cx="25%" cy="50%" r="10%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
<circle id="sd3" class="medium" cx="25%" cy="80%" r="15%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
</svg>

Only challange for me here to NOT resize and fill image in circle.

Upvotes: 1

Views: 398

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

The general answer to this question is that you need to use patternUnits="userSpaceOnUse" to make patterns be relative to the current coordinate system, rather than being relative to the object it is applied to.

For example, in the SVG below, I have set the pattern to be 200x200. Note that it is the same size no matter what the radius of each circle is. Also, it repeats independently of the siza and position of the circle also.

<svg id="graph" width="100%" height="400px">

  <!-- pattern -->
  <defs>
    <pattern id="image" patternUnits="userSpaceOnUse" x="0" y="0" height="200" width="200"
             viewBox="0 0 512 512">
      <image x="0%" y="0%" width="512" height="512" xlink:href="https://ppcaxis.com/cat-150.jpg"></image>
    </pattern>
  </defs>
    
  <circle id="sd" class="medium" cx="5%" cy="40%" r="5%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
  <circle id="sd2" class="medium" cx="25%" cy="50%" r="10%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
<circle id="sd3" class="medium" cx="25%" cy="80%" r="15%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
</svg>

So if you wanted each circle to have an independently positioned cat pattern, you would need to define a pattern specifically for each circle.

Upvotes: 2

Related Questions