javascript - 如何获取子id并在其下绘制svg

Question

我有一组包含其他较小多边形的多边形。我想使用子多边形的 id 在底部多边形下绘制一个三 Angular 形。我不知道如何使用子 ID 作为标识符来实现它。我已经尝试过，但三 Angular 形的位置总是在错误的位置。

这是代码

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

https://jsfiddle.net/nanadia/9fsd3953/3/

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