如何将preserveAspectRatio添加到用作背景图像的svg

Question

I'm having trouble with a svg pattern background that is not repeating on the x-axis in IE11 (and probably other IEs) and the Android native browser.
Apparently I should add preserveAspectRatio: "none slice" to the svg element, but what if the svg is used as background-image?

CSS

header.logoheader:after {
    background-image: url('patroon5.svg');
    background-size: auto 100%;
    background-repeat: repeat-x;
    content: "";
    display: block;
    height: 100px;
    left: 0;
    position: absolute;
    top: 40px;
    width: 100%;
}

(I'm using the :after selector so the transparent pattern covers the div)

In my HTML there is no svg element to add the preserveAspectRatio to. I'm thinking this is because of the :after selector.

Anyone got an solution?

Answer 1

您可以编辑背景图像svg文件以包含它，也可以使用SVG片段标识符，即

background-image: url('patroon5.svg#svgView(preserveAspectRatio(none))');

Answer 2

Had this kind of problem before on IE. To fix it you have to edit your svg file then remove the set width and height assuming you have viewBox set in there. Then add preserveAspectRatio="xMinYMid" as an attribute.

eg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     preserveAspectRatio="xMinYMid" viewBox="0 0 1024 1024" enable-background="new 0 0 1024 1024" xml:space="preserve">