我有一组包含其他较小多边形的多边形。我想通过使用子多边形的id在底部多边形下绘制一个三角形。我不知道如何使用child id作为标识符来实现它。我已经尝试过，但三角形的位置总是处于错误的位置。
这是代码
var svgns = "http://www.w3.org/2000/svg";
shape = document.createElementNS(svgns, "polygon");
shape.setAttributeNS(null, "points", "5,0 25,0 15,15");
shape.setAttributeNS(null, "fill", "black");
shape.setAttributeNS(null, "stroke", "black");
var x = sector.offset();
shape.setAttributeNS(null, 'x','xpos');
shape.setAttributeNS(null, 'y','Math.abs(ypos)');
shape.setAttributeNS(null, 'visibility', 'visible');
//var draw = document.getElementById(sector.attr('id'))
$(svg).append(shape);
答案 0 :(得分：1)
你不应该使用像offset()这样的jQuery函数。这给出了页面坐标中的位置。而且我甚至不确定它是否适用于SVG元素。
如果要将元素插入SVG，则需要使用SVG坐标，而不是页面坐标。您可以使用getBBox()方法获取SVG元素的边界框，从而在SVG中找到元素的位置。
$('polygon').click(function(evt) {
// Find the group that contains the polygon that was clicked on
var group = evt.target.parentNode;
// Get the bounding box of the group
var bbox = group.getBBox();
// Add a triangle to the group
var svgns = "http://www.w3.org/2000/svg";
var shape = document.createElementNS(svgns, "polygon");
shape.setAttribute("points", "-10,0, 10,0, 0,15"); // triangle centered on x=0
shape.setAttributeNS(null, "fill", "black");
var xPos = bbox.x + bbox.width / 2; // Horizontal centre of the bbox
var yPos = bbox.y + bbox.height; // Bottom of the group bbox
shape.setAttribute("transform", "translate(" + xPos + "," + yPos + ")");
group.appendChild(shape);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="svgselect" style="width: 610px; height: 230px;">
<!-- background-color:red -->
<svg version="1.1" height="100%" width="100%">
<g transform="scale(1.5)" id="gmain">
<g id="P17" transform="translate(25,0)">
<polygon points="5,5 15,5 15,15 5,15" fill="white" stroke="navy" stroke-width="0.5" id="C" opacity="1"></polygon>
<polygon points="0,0 20,0 15,5 5,5" fill="white" stroke="navy" stroke-width="0.5" id="T" opacity="1"></polygon>
<polygon points="5,15 15,15 20,20 0,20" fill="white" stroke="navy" stroke-width="0.5" id="B" opacity="1" class="B17"></polygon>
<polygon points="15,5 20,0 20,20 15,15" fill="white" stroke="navy" stroke-width="0.5" id="R" opacity="1"></polygon>
<polygon points="0,0 5,5 5,15 0,20" fill="white" stroke="navy" stroke-width="0.5" id="L" opacity="1"></polygon>
<text x="6" y="30" stroke="navy" fill="navy" stroke-width="0.1" style="font-size: 6pt;font-weight:normal">17</text>
</g>
<g id="P16" transform="translate(50,0)">
<polygon points="5,5 15,5 15,15 5,15" fill="white" stroke="navy" stroke-width="0.5" id="C" opacity="1"></polygon>
<polygon points="0,0 20,0 15,5 5,5" fill="white" stroke="navy" stroke-width="0.5" id="T" opacity="1"></polygon>
<polygon points="5,15 15,15 20,20 0,20" fill="white" stroke="navy" stroke-width="0.5" id="B" opacity="1" class="B16"></polygon>
<polygon points="15,5 20,0 20,20 15,15" fill="white" stroke="navy" stroke-width="0.5" id="R" opacity="1"></polygon>
<polygon points="0,0 5,5 5,15 0,20" fill="white" stroke="navy" stroke-width="0.5" id="L" opacity="1"></polygon>
<text x="6" y="30" stroke="navy" fill="navy" stroke-width="0.1" style="font-size: 6pt;font-weight:normal">16</text>
</g>
<g id="P15" transform="translate(75,0)">
<polygon points="5,5 15,5 15,15 5,15" fill="white" stroke="navy" stroke-width="0.5" id="C" opacity="1"></polygon>
<polygon points="0,0 20,0 15,5 5,5" fill="white" stroke="navy" stroke-width="0.5" id="T" opacity="1"></polygon>
<polygon points="5,15 15,15 20,20 0,20" fill="white" stroke="navy" stroke-width="0.5" id="B" opacity="1" class="B15"></polygon>
<polygon points="15,5 20,0 20,20 15,15" fill="white" stroke="navy" stroke-width="0.5" id="R" opacity="1"></polygon>
<polygon points="0,0 5,5 5,15 0,20" fill="white" stroke="navy" stroke-width="0.5" id="L" opacity="1"></polygon>
<text x="6" y="30" stroke="navy" fill="navy" stroke-width="0.1" style="font-size: 6pt;font-weight:normal">15</text>
</g>
</g>
</svg>
</div>