divにスナップショットを作成する

ここにコードがあります。 svgは1279 x 859です。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でこれを提供することができれば助けやすくなります、あなたはjQueryとSnapsvgで参照するためにcdnを使うことができます。それ以外の場合は、キャンバスの画面幅を取得し、それに応じてグラフィックの（左）位置を設定することをお勧めします。 – Sam0

A）あなたの質問からいくつかの言葉がありません。私はあなたのイメージを持っている）

B、あなたは

もしそうなら、「私はグラフィックを取得するにはどうすればよいのコンテナの左上隅にその左上隅を揃えるために」、言うことを意味と仮定しています：

を

position: fixed;

固定配置とは、要素がビューポートの端（ウィンドウ）から上、下、左、右の値を測定することを意味します。何が欲しいのです。

position: absolute;

位置決め何かが絶対にその上部、下部、左、右の値はその最後に位置祖先のエッジから測定されることを意味しますその部分は重要です。祖先要素のいずれもデフォルトでpositionedです。すべての要素はデフォルトでposition: staticです。 staticは、positionedとはみなされないpositionプロパティの唯一の値です。したがって、svgの親のpositionプロパティを変更する必要があります。私は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}とsvg {position：absolute}の両方を使用した場合。あなたが提案した通り。ありがとう。 – Steve

divにスナップショットを作成する

答えて

関連する問題