Question

这是代码。 svg是1279 x 859。

如何让图形左上角对齐现在，它排列在浏览器标签/窗口的左上角。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <style type="text/css">
        svg { position:fixed; top:0; left:0; height:100%; width:100%;
    }
    </style>

    <script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>



    <script src="/script/snap.svg.js" type="text/javascript"></script>
    <script src="/script/snap.svg.zpd.js" type="text/javascript"></script>

    <div id="jqxPanel" style="padding: 20px; border:1px solid black; width: 1920px; height: 1080px">
        <div id="image" style="padding: 2px; border: 1px solid black"; width: 1290px; height: 870px">
            <svg id="SnapCanvas" ></svg>
        </div>
    </div>

    <script type="text/javascript">
        var BaseSVG = Snap('#SnapCanvas');
        $(document).ready(function () {

            SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function (elem) {
                return elem.getScreenCTM().inverse().multiply(this.getScreenCTM());
            }

            Snap.load("Canvas.svg", function (f) {
                BaseSVG.append(f);
            });

        });
    </script>   
</body>
</html>

Answer 1

A）你遗漏了一些问题。我假设你的意思是说，“如何让图形将其左上角与其容器的左上角对齐”

如果是的话，

B）你的形象有：

position: fixed;

固定定位意味着元素将从视口边缘（即窗口）测量其顶部，底部，左侧，右侧值。你想要的是：

position: absolute;

定位某些东西绝对意味着它的顶部，底部，左侧和右侧值将从其最后定位的祖先的边缘开始测量。那部分很重要。默认情况下，它的祖先元素都不是positioned。默认情况下，所有元素都有position: static。 static是不被视为positioned 的匹配属性的唯一值。因此，您需要更改svg父级的position属性。我会把它改为relative，因为它最不可能与你的风格搞混。

在一天结束时，您的样式应如下所示：

 svg { 
   position:absolute; 
   top:0; 
   left:0; 
   height:100%; 
   width:100%;
 }

 #image {
   position: relative;
 }

编辑错别字。

使svg快照图像排在div上

1 个答案: