Stretch <svg> inside an <embed> to fit window size

后端 未结 2 576
失恋的感觉
失恋的感觉 2021-01-02 23:48

I am trying to stretch an svg document inside an DOM in order to fit the window size.

like so:

cl
2条回答
  •  我在风中等你
    2021-01-03 00:37

    All browsers should be able to handle this just fine:

    • add a viewBox to the svg element (s17.svg in your example) without using script if possible
    • remove the width and height attributes on the svg element if they are specified
    • add an attribute preserveAspectRatio="none" to the svg element to make it stretch even if the css-viewport aspect ratio doesn't match the viewBox aspect ratio.
    • set the width/height of the embed/iframe/object to whatever you want and the svg will automatically stretch to fit

    If you don't want stretching then you can also do preserveAspectRatio="xMidYMid slice" (fill whole viewport, slicing away parts if necessary) or preserveAspectRatio="xMidYMid meet" (this is the default, center the svg in the viewport and maintain the aspect ratio).

提交回复
热议问题