div에 svg 스냅 이미지 라인을 만듭니다.

다음은 코드입니다. SVG 내가 브라우저의 탭/창의 왼쪽 상단 모서리에 지금 에 라인의 왼쪽 상단 모서리를 정렬 그래픽을받을 수 있나요 어떻게 1279 X 859div에 svg 스냅 이미지 라인을 만듭니다.

입니다.

<!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에서 이것을 제공 할 수 있다면 쉽게 도움이 될 것입니다. jn을 사용하여 jQuery와 Snapsvg에서 참조 할 수 있습니다. 그렇지 않으면 캔버스 화면 너비를 가져 와서 그래픽의 (왼쪽) 위치를 적절하게 설정하는 것이 좋습니다. – Sam0

A) 질문에서 일부 단어가 누락되었습니다. 나는 귀하의 이미지가있다)

B, 당신이

그렇다면 "나는 그래픽을 얻는 방법은 해당 컨테이너의 왼쪽 상단 모서리에 왼쪽 위 모서리를 정렬"라고 의미 있으리라 믿고있어 :

를

position: fixed;

고정 위치 지정은 요소가 뷰포트의 가장자리 (예 : 창)에서 위쪽, 아래쪽, 왼쪽, 오른쪽 값을 측정한다는 것을 의미합니다. 당신이 원하는 것은 :

position: absolute;

위치 무언가가 절대적으로 상단, 하단, 왼쪽 및 오른쪽 값이 마지막 위치 지정된 조상의 가장자리에서 측정된다는 것을 의미합니다. 그 부분은 중요합니다. 조상 요소 중 어느 것도 기본적으로 positioned입니다. 모든 요소의 기본값은 position: static입니다. static은 positioned으로 간주되지 않는 position 속성의 유일한 값입니다. 따라서 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} 및 svg {position : absolute}를 사용하십시오. 당신이 제안한대로. 감사. – Steve

div에 svg 스냅 이미지 라인을 만듭니다.

답변

관련 문제