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>

考虑上面的例子，我有一个id为poly_depth1的多边形，我想在这个多边形内创建另一个多边形10px。我想用普通的JavaScript或D3创建这个子多边形。多边形应该保持相同的形状。

Answer 1

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>

Answer 2

这里有一些代码可以做你想要的（我相信）。

对于多边形中的每个点，它会计算一个新点，该点是指向多边形中心的指定距离。

然后使用一组调整后的点附加一个新的多边形。

＆＃13;

// 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)
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

使用javascript在SVG中的大多边形内创建小多边形

2 个答案: