使 svg 快照图像在 div 上排列

Question

这是代码。 svg 为 1279 x 859。

如何让图形的左上角与现在它排在浏览器 tab/window.

的左上角

<!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) 你的问题中漏掉了一些词。我假设你的意思是 "How do I get the graphic to align its top-left corner to the top left corner of its container"

如果是，

B)您的图片有：

position: fixed;

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

position: absolute;

绝对定位某物意味着它的顶部、底部、左侧和右侧值将从其最后定位的祖先的边缘开始测量。那部分很重要。默认情况下，它的 None 个祖先元素是 positioned。默认情况下，所有元素都有 position: static。 static 是位置属性的唯一值，未被视为 positioned。因此，您需要更改 svg 父级的位置属性。我会将其更改为 relative，因为它最不可能破坏您的样式。

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

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

 #image {
   position: relative;
 }

已编辑拼写错误。

使 svg 快照图像在 div 上排列

make svg snap image line up on a div

javascript

css

jquery

svg

snap.svg