JquerySVG 요소가 특정 지점에서 잘리는 경우 어떻게 수정해야합니까?

Question

jQuerySVG 1.5를 사용하여 일부 직사각형을 만들고 있는데, x, y, w 및 h에 대한 변수 데이터가있는 문제가 있습니다. 내 요소의 규모를 늘리려고하고 있으므로 변수를 곱해서 사용하고 있습니다. scale을 2으로 설정하면 사각형이 잘 인쇄되지만, 3으로 설정하면 일부가 잘리고 나머지는 요소 뒤에 숨겨집니다.

나는이 문제를 내가 어지럽 혔을 때 전에 보았습니다. 이 문제를 해결하기 위해 CSS width 및 height을 내 요소의 너비와 높이로 설정합니다.

즉, 그것이 이번에는 작동하지 않는 어떤 이유

$('#svg').css({ width: "100px", height: "100px", position: "absolute"}); 

. 나는 div을 추가하려고 시도했다. SVG를 다른 div으로 만들지도 않았고, 몸 높이를 1000이나 10000과 같이 크게 설정하지도 않았고,이 문제를 해결했다.

나는 또한 직사각형을 정말 크게 만든 다음 내 줌 비율에 따라 더 적은 직사각형을 잘라내는 Google 크롬으로 확대/축소합니다. 여기

내 문제를 설명 일부 사진입니다

http://imageshack.com/a/img540/7610/9KrAp3.png

여기 내 코드입니다 :

$.getJSON('test.json', function(data) { 
    var scale = 2; 
    for (var i = 0; i < total; i++) { 
    var svg = document.createElement("div"); 
    svg.id = 'svg' + i; 
    document.body.appendChild(svg); 
    $('#svg' + i).svg(); 
    var svgE = $('#svg' + i).svg('get'); 
    svgE.rect(x,y,w,h, { 
     stroke: 'lightblue', 
     strokeWidth: 0.5 
     }); 

    $('#svg' + i).css({ 
     position: "absolute" 
    }); 
    } 
}); 

어떤 도움을 주시면 감사하겠습니다, 감사합니다.

Answer 1

문제가 해결되었습니다.

기본적으로 요소 당 1 div가 있으므로 각 요소와 개별적으로 상호 작용할 수 있습니다. 즉, div 내에서 내 x, y로 0,0을 사용해야하고 항목을 올바르게 배치하기 위해 div의 위치를 ​​설정해야합니다.

이것은 내 사각형으로 x, y를 없애고 왼쪽 및 위쪽으로 CSS 위치 지정으로 사용해야한다는 것을 의미합니다.

$('#svg').css({width: width, height: height, position: "absolute", left:x, top: y}); 

나는 이러한 SVG 사각형

$("#svg"+i).draggable({ snap: true });에 드래그 추가하고 그래서 제대로 사업부에 포함되는 각 요소를 필요, 또는 다른 I 화면의 임의의 영역에 스냅됩니다.

svg에서 내 뷰포트의 너비는 3000이지만 높이는 전혀 설정되지 않습니다. 뷰포트 높이가 무엇인지 모르겠지만 잠시 후 깨집니다.

이렇게하려면 뷰포트와 뷰 박스를 행운이없는 svg.configure()으로 변경해 보았습니다. 그러나 SVG 요소의 "너비와 높이"를 설정하면 작동합니다. 분명히 이것은 ViewPort의 너비와 높이를 직접 설정하고 있습니다. 이유는 확실하지 않습니다. "

그래서 내가해야 할 일을 얻는 데 필요한 전체 코드는 다음과 같습니다.SVG 뷰포트 및 뷰 박스에

var svg = document.createElement("div"); 

    svg.id = 'svg';  
    document.body.appendChild(svg); 

    $('#svg').svg(); 


    var svgE = $('svg').svg('get'); 
    svgE.configure({width: width, height: height, true); 
//According to the docs, the boolean at the end is ------ 

//clear (boolean, optional) is true to remove existing attributes first, 
//or false (default) to add to what is already there. 
//in my case I want to rewrite everything. 


svgE.rect(0,0,data.width, height); //can also add other settings like fill within the rect 
// faceE.rect(0,0, width, height,{fill: color, stroke: color, strokeWidth: 1}); 

$('#svg').draggable({ snap: true}); 
$('#svg').css({position:"absolute", left: x, top: y}); 

자세한 내용은 여기 http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

나는 이것에 의해 도움이 될 문제를 가지고 사람을 희망 찾을 수 있습니다.