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

【问题标题】：how to add preserveAspectRatio to svg used as background-image如何将preserveAspectRatio添加到用作背景图像的svg
【发布时间】：2015-05-28 22:28:32
【问题描述】：

我的 svg 图案背景在 IE11（可能还有其他 IE）和 Android 本机浏览器的 x 轴上不重复出现问题。
显然我应该在 svg 元素中添加preserveAspectRatio: "none slice"，但是如果将 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 选择器。

有人有解决办法吗？

【问题讨论】：

该属性应该在基本 SVG 代码中......而不是“图像”......但是无论它是否是 SVG，图像都会像任何其他图像一样表现。
如果它应该表现得像任何其他图像，为什么它不在 IE11 和 Android 原生浏览器的 x 轴上重复？
没有演示就无法测试。

标签： html css internet-explorer svg

【解决方案1】：

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

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

【讨论】：

您可以在此处省略 'slice'，因为当为 'none' 时它会被忽略，请参阅 w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute。

【解决方案2】：

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

例如

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

【讨论】：