使svg snap图像排列在div上

以下是代码。 svg是1279 x 859.使svg snap图像排列在div上

我如何获得图形将其左上角对齐到现在它排列在浏览器的选项卡/窗口的左上角。

<!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>

来源

2016-09-21 Steve

如果左上角对齐到右边不会是屏幕/画布？如果你可以在jsfiddle中提供这个功能，会更容易提供帮助，你可以使用cdn来引用jQuery和Snapsvg。否则，建议获取画布屏幕宽度并相应地设置图形的（左）位置。 – Sam0

答：你错过了一些你的问题。我假设你的意思是说，“我如何获得图形到它的左上角对齐到其容器的左上角的”

如果是这样，

B）您的图片有：

position: fixed;

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

position: absolute;

定位的东西绝对意味着它的顶部，底部，左，右的值将从上次定位的祖先的边缘进行测量。这部分很重要。它的祖先元素默认为positioned。所有元素默认为position: static。 static是不考虑位置属性的唯一值positioned。所以，您需要更改svg父级的位置属性。我会将其更改为relative，因为它最不可能与您的风格拧紧。

在这一天你的风格应该是这样的结尾：

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

#image { 
    position: relative; 
}

编辑错别字。

来源

2016-09-22 01:06:20 jlogan

如果使用#image {position：relative} AND svg {position：absolute}来获取图像的行为与预期相同。如你所建议的。谢谢。 – Steve

使svg snap图像排列在div上

回答

相关问题