1

I'm looking to have an svg fill a particular space in my layout, so preserveAspectRatio="none" seems like a good first approach.

However, within the svg, there is a mask that I do not want to stretch / warp. Rather, it should occupy 100% the width, with the height scaling according to its ratio. The two images illustrate the mask's behaviour when the parent svg is in either landscape or portrait. (Note: the grey in the image is the rest of the <svg>, which should stretch to fit)

Can the mask have its own aspectRatio settings? Is there a better way to achieve this? Or, is it even possible?

example of mask when filling landscape area example of the mask when in a portrait viewport

```

<!-- this should scale according to its bounding parent -->
<svg class="fix" viewbox="0 0 2880 1620" preserveAspectRatio="none..?">

  <!-- this should scale according to some intrinsic ratio -->
  <mask id="mask" 
        maskUnits="userSpaceOnUse" 
        maskContentUnits="userSpaceOnUse">
    <rect fill="white" x="0" y="0" width="2880" height="1620" /> 
    <path fill="black" d="M57.59,60h409c344.17,.... ...."/>
  </mask>

  <rect mask="url(#mask)" x="0" y="0" width="100%" height="100%" />

</svg>

```

edit: using mask-image instead of just mask seems possible (as it has additional positioning options), but this does not seem to work with svg elements.

2
  • No to your question. Anything inside the SVG will be affected by the preserveAspectRatio. Also, why are you using preserveAspectRatio="none"? The behaviour you illustrate in your mockups is the behaviour of the default preserveAspectRatio ("xMidYMid meet"). Jul 9, 2017 at 14:54
  • Hey Paul - yeah I figured as much, thanks. I'm using preserveAspectRatio=none because I wish the rest of the svg to scale/stretch within an arbitrary space; however the mask within should not. As an aside, I've seen <symbol> with multiple <svg>s within that actually allow this behavior (i.e. different aspectRatios), but wasn't able to solve for a mask
    – wes
    Jul 9, 2017 at 19:27

1 Answer 1

1

You don't need to use preserveAspectRatio="none" to have the rectangle and mask fill the page. Just extend the <rect> and <mask> past the boundaries of the SVG in all directions. Root <svg> elements have overflow: visible by default, so the extended rect will fill SVGs parent container - as long as you extend far enough of course.

<rect mask="url(#mask)" x="-1000%" y="-1000%" width="3000%" height="3000%" />

I've used 1000% here, but you can adjust that if you need more or less (than 10x).

And note that we are just using the standard default SVG preserveAspectRatio. So we still get the automatic centerinng and scaling of the SVG.

body {
  margin: 0;
  padding: 0;
}

svg {
  width: 100vw;
  height: 100vh;
}
<svg viewbox="0 0 2880 1620">

  <!-- this should scale according to some intrinsic ratio -->
  <mask id="mask" 
        maskUnits="userSpaceOnUse" 
        maskContentUnits="userSpaceOnUse"
        x="-1000%" y="-1000%" width="3000%" height="3000%">
    <rect fill="white" x="-1000%" y="-1000%" width="3000%" height="3000%" /> 
    <circle cx="1440" cy="810" r="400" fill="black"/>
  </mask>

  <rect mask="url(#mask)" x="-1000%" y="-1000%" width="3000%" height="3000%" />

</svg>

Demo in fiddle format

1
  • ah, interesting. that's a solution i never thought of, cheers!
    – wes
    Jul 10, 2017 at 22:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.