자바 스크립트를 사용하여 SVG의 큰 폴리곤 안에 작은 폴리곤을 만듭니다.

Question

SVG 그래픽에 매우 익숙합니다. SVG 사각형 안에 여러 개의 SVG 폴리곤을 만들려고합니다.

큰 다각형 안에 작은 폴리곤을 만드는 데 어려움을 겪고 있습니다.

내 폴리곤은 삼각형과 직사각형뿐만 아니라 다각형입니다. 나는 내부 다각형의 포인트를 얻을 어떻게, 내가 부모와

<svg width="120" height="120" viewBox="0 0 120 120" 
 
    xmlns="http://www.w3.org/2000/svg"> 
 
    
 
    <polygon id="poly_depth1" points="60,20 100,40 100,80 60,100 20,80 20,40" fill="blue"/> 
 
</svg>

예 위의 고려 자식 다각형 사이의 부모 다각형 및 공간 거리의 지점을 가지고, 내가 원하는, 아이디 poly_depth1과 다각형을 이 다각형 안에 다른 다각형 10px를 만들 수 있습니다.이 자바 폴리곤을 일반 JavaScript 또는 D3을 사용하여 만들고 싶습니다. 다각형은 같은 모양을 유지해야합니다.

Answer 1

원하는 코드를 작성하면됩니다.

다각형의 각 점에 대해 다각형의 중심을 향해 더 먼 거리 인 새 점을 계산합니다.

그런 다음 조정 된 점 세트를 사용하여 새 다각형을 추가합니다.

// A reference to the original polygon 
 
var poly1 = document.getElementById("poly_depth1"); 
 

 
// Calculate the average of the x and y coordinates. 
 
// So we have a point inside the polygon 
 
var poly2points = getInsidePolygon(poly1, 10); 
 

 
// Create a new polygon with the adjusted points 
 
var poly2 = document.createElementNS("http://www.w3.org/2000/svg", "polygon"); 
 
poly2.setAttribute("id", "poly_depth2"); 
 
poly2.setAttribute("points", poly2points.join(',')) 
 
poly1.ownerSVGElement.appendChild(poly2); 
 

 

 

 
function getInsidePolygon(poly, distance) 
 
{ 
 
    var points = poly.points; 
 
    var centre = getCentrePoint(points); 
 

 
    // For each polygon point, move towards the centre point by 
 
    // 'distance' and return that point 
 
    var result = [] 
 
    for (var i=0; i<points.numberOfItems; i++) { 
 
    var pt = points.getItem(i); 
 
    var adjustedPt = getPointAlongLine(pt.x, pt.y, centre.x, centre.y, distance); 
 
    result.push(adjustedPt.x.toFixed(4)); 
 
    result.push(adjustedPt.y.toFixed(4)); 
 
    } 
 

 
    return result; 
 
} 
 

 

 
function getCentrePoint(points) 
 
{ 
 
    // Average all the X and Y points to get the polygon centre point 
 
    var midX = 0, midY = 0; 
 
    for (var i=0; i<points.numberOfItems; i++) { 
 
    var pt = points.getItem(i); 
 
    midX += pt.x; 
 
    midY += pt.y; 
 
    } 
 
    return { 
 
    x: midX/points.numberOfItems, 
 
    y: midY/points.numberOfItems 
 
    } 
 
} 
 

 

 
function getPointAlongLine(x1, y1, x2, y2, distance) 
 
{ 
 
    // Return the point that is "distance" along the line from x1,y1 to x2,y2. 
 
    var dx = x2 - x1; 
 
    var dy = y2 - y1; 
 
    var len = Math.sqrt(dx * dx + dy * dy); 
 
    return { 
 
    x: x1 + dx * (distance/len), 
 
    y: y1 + dy * (distance/len) 
 
    } 
 
}

#poly_depth2 { 
 
    fill: red; 
 
    fill-opacity: 0.4; 
 
}

<svg width="240" height="240" viewBox="0 0 120 120" 
 
    xmlns="http://www.w3.org/2000/svg"> 
 
    
 
    <polygon id="poly_depth1" points="60,20 100,40 100,80 60,100 20,80 20,40" fill="blue"/> 
 
</svg>

Answer 2

points 속성은 다각형의 각 모서리에 대한 x 및 y 좌표를 정의합니다. 더 작거나 더 큰 다각형을 원할 경우 다각형의 x 및 y 좌표에서 거리를 더하거나 뺄 필요가 있습니다.

<svg width="140" height="140" viewBox="0 0 120 120" 
    xmlns="http://www.w3.org/2000/svg"> 

    <polygon id="poly_depth1" points="60,20 100,40 100,80 60,100 20,80 20,40" fill="blue"/> 
    <polygon id="poly_depth2" points="60,35 90,50 90,70 60,85 30,70 30,50" fill="red"/> 
</svg>