Responsive SVG Mask

Question

I have looked at several other answers on Stack: Responsive SVG Clip Path or Mask Image Responsive SVG image mask

But none seem to work for me. I have an SVG mask based on a path. I want it to expand to fill all available space (or contract) whilst keeping the aspect ratio of the path.

    svg {
        width: 100%;
        height: 100%;
    }

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 237.859 264.582" preserveAspectRatio="xMinYMin meet">
  <defs>
    <pattern id="triangle-image" patternUnits="userSpaceOnUse" width="3918" height="3918">
      <image xlink:href="images/aspirational-photos/christian-buehner-JQFHdpOKz2k-unsplash.jpg" x="0" y="0" width="100%" height="100%" />
    </pattern>
    <pattern id="triangle-pattern" width="100%" height="100%" patternUnits="userSpaceOnUse">
      <path id="triangle-path" d="M237.844,32.946c-0.001-9.981-4.42-19.279-12.121-25.512c-7.82-6.331-17.85-8.78-27.518-6.721
        c-3.373,0.717-6.639,1.979-9.707,3.751l-129.11,74.56l-42.942,24.8C6.147,109.771-0.001,120.42,0,132.312
        c0,11.892,6.149,22.541,16.449,28.487l84.623,48.833l87.457,50.486c7.179,4.143,15.193,5.435,23.174,3.736
        c15.41-3.279,26.166-16.532,26.156-32.222L237.844,32.946z"
              fill="#fff" fill-rule="evenodd" width="100%" height="100%" />
    </pattern>
    <mask id="triangle-mask" width="100%">
      <rect x="0" y="0" width="100%" height="100%" fill="url(#triangle-pattern)" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#triangle-image)" mask="url(#triangle-mask)"/>
</svg>

The SVG seems to obey the path values no matter what I do. Is there a way to make it expand or contract like an image would?

In what way does this *not* work. What are you masking etc? - https://codepen.io/Paulie-D/pen/bGGOKeo — Paulie_D, Nov 18 '19 at 13:26

enxaneta · Accepted Answer · 2019-11-18T13:36:21.190

I've simplified your code in the sense that I'm applying the mask to the image instead of using patterns. Also the mask is the path. I'm not using width="100%" since the width af an svg element will take all the space available i.e 100%. I would like to understand why you need it height="100%"

            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 265">
                <defs>
                    <mask id="triangle-mask">
                        <path d="M237.844,32.946c-0.001-9.981-4.42-19.279-12.121-25.512c-7.82-6.331-17.85-8.78-27.518-6.721
c-3.373,0.717-6.639,1.979-9.707,3.751l-129.11,74.56l-42.942,24.8C6.147,109.771-0.001,120.42,0,132.312
c0,11.892,6.149,22.541,16.449,28.487l84.623,48.833l87.457,50.486c7.179,4.143,15.193,5.435,23.174,3.736
c15.41-3.279,26.166-16.532,26.156-32.222L237.844,32.946z"
                        fill="#fff"  />
                    </mask>
                </defs>
            <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" mask="url(#triangle-mask)"/>
            </svg>

Alternatively if you need all those patterns please remove width="100%"for the mask in your code.

Interesting, this is certainly a lot simpler, so thank you for that. I added ` style="width:100%;max-width: 100%;height: 100%;"` to the ` — Eoin, Nov 20 '19 at 17:52
I've made the viewBox dynamic as per the SVG values, which may or may not be correct as the SVG initially contained all three triangles. That was just the way Illustrator CS5 exported them. But using `viewBox="0 0 265 240"` had the same issue. — Eoin, Nov 20 '19 at 19:18
In order to know what `viewBox` to use you can use the `getBBox()` method for the mask path — enxaneta, Nov 20 '19 at 19:19

Responsive SVG Mask

1 Answers1