Question

我正在尝试使用SVG的viewbox属性来将所选区域适合屏幕。所需的效果是所有视图框区域将显示在屏幕上，并保留纵横比。 Internet Explorer和Chrome具有正确的行为，图像区域垂直和水平居中。

在opera和firefox中，行为并不理想。在宽屏幕中，图像总是全宽，然后一些区域从底部丢失

我正在使用的代码包含在下面，对我已经解决的问题有一些评论。请参阅页面底部的截图

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Svg static view box</title>
<style>
    body, html {
        height: 100%; /* Required to make div fill to screen height, otherwise IE picks smaller image height */
        margin: 0; 
        padding: 0; /* Remove standard behaviour for body margin */
        overflow: hidden;
    }
    div {
        background: red;
        height: 100%; 
    }
</style>
</head>
<body>
<div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 2000 1000">
        <rect height="1000" width="2000" y="0" x="0" fill="#afe9c6"/>
        <path d="M40,1000,2000,40" stroke="#00aad4" stroke-width="10" fill="none"/>
        <path d="M40,40,2000,1000" stroke="#00aad4" stroke-width="10" fill="none"/>
        <text font-size="144px" y="550" x="500" >SVG DOCUMENT</text>
    </svg>
</div>
</body>
</html>

铬的理想效果 Desired effect in chrome

Opera溢出 Overflow in Opera

Answer 1

viewBox属性不会影响SVG元素的布局。它所做的就是建立SVG文档中使用的坐标。请参阅规范：

http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute

使用HTML CSS为SVG元素提供边距或特定的宽度和高度。有了你所拥有的，SVG元素没有指定的大小，因此你将得到未定义的行为。

SVG视图，图像设置为父元素宽度，不适合父元素

1 个答案: