Can't show image inside SVG path with fill color

Question

I want to display png image on SVG path with fill colour in it.

Tried following solution:

• https://stackoverflow.com/a/3798797/9372104
• https://stackoverflow.com/a/47668176/9372104

Issue facing with these solution is I cannot have color fill and image inside path same time. I had to remove color fill so that fills in path.

Here is exmaple:

<svg viewBox="0 0 1880.7004 1240.6498" height="200" width="300" y="0px" x="0px">
  <defs>
    <pattern id="imgpattern" x="0" y="0" width="1" height="1" viewBox="0 -200 100 350">
      <image width="100" height="100" xlink:href="https://cdn.glitch.me/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg" />
    </pattern>
  </defs>
  <g transform="matrix(-0.93722287,0.34873097,-0.34873097,-0.93722287,3859.4131,138.8554)" id="g5084">
    <path style="fill:#1b2948" fill="url(#imgpattern)" id="path59" d="m 3190.769,783.804 c 0.51,-0.836 1.046,-1.657 1.635,-2.442 l -2.625,2.327 -412.172,-47.983 75.376,102.135 -264.389,-37.132 39.793,-5.177 c 7.954,-2.745 10.412,-12.775 4.62,-18.958 L 2129.254,270.138 c -24.446,-25.632 -61.478,-64.869 -66.782,-71.891 -3.409,-4.492 -5.975,-8.364 -7.607,-12.848 29.068,14.482 55.688,33.76 78.678,57.174 l 247.827,241.105 225.108,20.004 1.061,1.423 541.945,51.506 c 42.951,14.094 73.649,24.056 79.768,25.789 20.624,5.862 28.556,2.757 46.099,-3.878 1.38,-0.551 2.729,-1.028 4.109,-1.579 4.49,-1.718 7.809,-4.127 10.319,-6.998 l 295.368,28.072 -109.795,-0.239 139.225,184.187 155.527,17.834 c 6.057,16.956 10.297,29.089 12.158,34.885 1.935,6.067 3.29" stroke="#c0392b" stroke-width="10"></path>
  </g>
</svg>

I have to remove style="fill:#1b2948" from path to show image, I want to have SVG as it is but with image on it.

Answer 1

Here are steps to achieve this:

• Define a pattern with a unique id
• Add a shape (like ellipse or rect) to the pattern and fill it with the colour you want
• Add an image to the pattern
• Fill the path with the pattern using the fill attribute

Note that the viewBox in the pattern causes the image to maintain that aspect ratio. If you don't want that you can add preserveAspectRatio="none" but then the image will cease to maintain its aspect ratio.

<svg viewBox="0 0 1880.7004 1240.6498" height="200" width="300" y="0px" x="0px">
  <defs>
    <pattern id="imgpattern" x="0" y="0" width="1" height="1" viewBox="0 -200 100 350">
      <ellipse rx="1000" ry="500" fill="rgba(0, 0, 0, 100)" />
      <image width="100" height="100" xlink:href="https://cdn.glitch.me/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg" />
    </pattern>
  </defs>
  <g transform="matrix(-0.93722287,0.34873097,-0.34873097,-0.93722287,3859.4131,138.8554)" id="g5084">
    <path fill="url(#imgpattern)" id="path59" d="m 3190.769,783.804 c 0.51,-0.836 1.046,-1.657 1.635,-2.442 l -2.625,2.327 -412.172,-47.983 75.376,102.135 -264.389,-37.132 39.793,-5.177 c 7.954,-2.745 10.412,-12.775 4.62,-18.958 L 2129.254,270.138 c -24.446,-25.632 -61.478,-64.869 -66.782,-71.891 -3.409,-4.492 -5.975,-8.364 -7.607,-12.848 29.068,14.482 55.688,33.76 78.678,57.174 l 247.827,241.105 225.108,20.004 1.061,1.423 541.945,51.506 c 42.951,14.094 73.649,24.056 79.768,25.789 20.624,5.862 28.556,2.757 46.099,-3.878 1.38,-0.551 2.729,-1.028 4.109,-1.579 4.49,-1.718 7.809,-4.127 10.319,-6.998 l 295.368,28.072 -109.795,-0.239 139.225,184.187 155.527,17.834 c 6.057,16.956 10.297,29.089 12.158,34.885 1.935,6.067 3.29" stroke="#c0392b" stroke-width="10"></path>
  </g>
</svg>