Question

我在IE11（可能还有其他IE）和Android原生浏览器的x轴上没有重复的svg模式背景时遇到问题。
显然我应该将preserveAspectRatio: "none slice"添加到svg元素，但是如果svg用作背景图像会怎样？

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%;
}

（我正在使用:after选择器，因此透明图案覆盖了div）

在我的HTML中没有要添加preserveAspectRatio的svg元素。我认为这是因为:after选择器。

有人有解决方案吗？

Answer 1

您可以编辑背景图像svg文件以包含它，或者使用SVG fragment identifier即

。

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

Answer 2

之前在IE上遇到过这种问题。要修复它，您必须编辑您的svg文件，然后删除集width和height，假设您已设置viewBox。然后添加preserveAspectRatio="xMinYMid"作为属性。

e.g。

<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">

如何将preserveAspectRatio添加到用作background-image的svg

2 个答案: