Css 在流体SVG中保持背景图像纵横比的问题_Css_Svg_Polygon

Css 在流体SVG中保持背景图像纵横比的问题

css svg

Css 在流体SVG中保持背景图像纵横比的问题,css,svg,polygon,Css,Svg,Polygon,我有一个全页面宽度/高度的SVG，因此SVG和SVG中的多边形会根据窗口的不同而改变形状和大小，这是通过将SVG元素上的PreserveSpectratio设置为“none”实现的。多边形有一个背景图像，应该保持它们的纵横比，因为我将PreserveSpectratio设置为“xMinYMin切片”。但令人遗憾的是，SVG元素上的PreserveSpectratio似乎引起了冲突，现在当我改变窗口大小时，背景图像的纵横比也会改变。我想要的基本上是SVG等价于“背景大小：封面” SVG测试 ht

我有一个全页面宽度/高度的SVG，因此SVG和SVG中的多边形会根据窗口的不同而改变形状和大小，这是通过将SVG元素上的PreserveSpectratio设置为“none”实现的。多边形有一个背景图像，应该保持它们的纵横比，因为我将PreserveSpectratio设置为“xMinYMin切片”。但令人遗憾的是，SVG元素上的PreserveSpectratio似乎引起了冲突，现在当我改变窗口大小时，背景图像的纵横比也会改变。我想要的基本上是SVG等价于“背景大小：封面”


SVG测试
html，正文{
身高：100%；
边际：0px；
填充：0；
}
svg{
浮动：左；
}

将

preserveAspectRatio

设置为

“无”

，基本上就是告诉浏览器拉伸400x400图像以填充屏幕。这里没有冲突或错误。它完全按照你说的去做

如果正在拉伸SVG，则所有内容都将受到影响。除了使用JS调整SVG内容之外，没有其他方法可以解决这个问题

您可以使用CSS掩码之类的替代方法。但是IE不支持这些

<!DOCTYPE html>
<html>
<head>
<title>SVG Test</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0px;
    padding: 0;
}
svg {
    float: left;
}
</style>
</head>
<body>
<svg version="1.1" id="gallery_overview" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" x="0px" y="0px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" preserveAspectRatio="none">
    <defs>
        <pattern id='image1' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
            <image xlink:href='http://upload.wikimedia.org/wikipedia/commons/d/d3/Statue_of_Liberty%2C_NY.jpg' width="100" height="100" preserveAspectRatio="xMinYMin slice"></image>
        </pattern>
        <pattern id='image2' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
            <image xlink:href='http://upload.wikimedia.org/wikipedia/commons/9/94/Top_of_Rock_Cropped.jpg' width="100" height="100" preserveAspectRatio="xMinYMin slice"></image>
        </pattern>
        <pattern id='image3' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
            <image xlink:href='http://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Chinatown_manhattan_2009.JPG/1920px-Chinatown_manhattan_2009.JPG' width="100" height="100" preserveAspectRatio="xMinYMin slice"></image>
        </pattern>
    </defs>
    <polygon fill="url(#image1)" points="0 0, 400 0, 200,200"/>
    <polygon fill="url(#image2)" points="0 0, 400 400, 0 400"/>
    <polygon fill="url(#image3)" points="400 0, 400 400, 200 200"/>
</svg>
</body>
</html>