preserveAspectRatio meet and slice, at the same time

14 Apr

I was wanting to have an SVG graphic always stretch to fill its viewport vertically, but be sliced horizontally. Unfortunately, the preserveAspectRatio attribute of <svg> elements only supports either meet (stretch-to-fit) or slice (always fill the viewport).

So, in finest web-development tradition, I came up with a hack, using a 1-unit-wide outer “meet”ing <svg> element, which contains a full-size (mega-wide) “slice”d element:

<svg id="outer"
        x="100%" y="0"
        width="1" height="100%"
        viewBox="0 0 1 1000"
        preserveAspectRatio="xMaxYMax meet"
        overflow="visible"
        >
    <svg id="inner"
            x="-2000" y="0"
            width="2000" height="100%"
            viewBox="0 0 2000 1000"
            preserveAspectRatio="xMaxYMax slice"
            overflow="visible"
            >
        ...
    </svg>
</svg>

You should be able to see the result of this hackery on my main site; raumkraut.net. Assuming it hasn’t been overhauled again since this posting.

Unless, that is, you’re running a WebKit-based browser, since (at time of writing) they seem to treat all SVG backgrounds as having preserveAspectRatio=”none”. Sigh.

Tags:

Fristy Psot

13 Apr

About time I had somewhere from which to spew forth my thoughts and discoveries into the seething oblivion of disregarded trivialities that constitutes the modern Internet.

In the mean time, go play #F00 Baron. Chocks away!