使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上

回答

相關問題