Question

我正在尝试使用包含图像的svg部分定义html页面。 svg视口应该占据整个窗口，图像应该停靠在一侧，让我们说右下角。问题是，当窗口宽度发生变化时，我希望图像的右边框粘在窗口的边框上。但是图像被推回可见区域。我确实相信这是因为，即使调整窗口大小，视口也不是。

以下是代码：

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="/js/snap.svg-min.js"></script>
<script lang="javascript">
    var paper, el;
    function init() {
        paper = Snap(window.innerWidth, window.innerHeight);
        el = paper.image("http://calibre11.wpengine.netdna-cdn.com/wp-content/uploads/2012/07/TAG-Heuer-Monaco-Cal360-1024x768.jpg", 0, 0, window.innerWidth, window.innerHeight).attr({
            preserveAspectRatio : "xMaxYMax meet"
        });
    }
</script>
<style>
    .svg {
        background-color: black
    }
</style>
</head>
<body onload="init();">
</body>
</html>

如何让svg视口和视图框自动调整到窗口大小？管理窗口调整大小事件？我试图使用百分比，没有任何成功。

我应该怎么做svg图像右侧贴在窗口的右侧？同样，我想使用百分比，但看起来效果不好。

（我在svg元素中使用了一个图像，因为我想稍后将其掩盖）。

谢谢！

如何在调整浏览器窗口大小时将图像捕捉到SVG中的边框？

0 个答案: