我有一个问题是获取吸引其他svg的svg id。基础svg是一个多边形svg，当我给出一个选项并单击多边形时，它会产生一个效果，就像线条变粗或在其上绘制其他svg或用颜色填充多边形。我想通过单击已经具有效果的多边形来删除该效果。但是当我点击它时，它会显示基本svg元素的id。
如何显示效果的ID，然后仅删除效果。
https://jsfiddle.net/nanadia/f3ek1ed5/2/
$(document).ready(function () {
$("#btn-delete").click(function(){
var a = document.getElementById("amf");
$('amf').click(function (evt) {
d3.select("amf").remove();
});
});
});
非常感谢
答案 0 :(得分：1)
我建议采用两种不同的方法。一种用于更改多边形样式的两种情况，另一种用于向组中添加另一个元素的其他情况。
在第一种情况下，最简单的方法是在多边形上切换一个类。单击一次，即可添加该类。再次单击，将删除类（及其关联的样式）。
else if (strUser == "gif")
{
$(evt.target).toggleClass("gif");
}
在第二种情况下，只需给你添加的元素一个类。然后单击检查该组是否包含具有该类的元素。如果是，请删除该元素。否则正常添加。
if (strUser == "amf")
{
// Find the group that contains the polygon that was clicked on
var group = evt.target.parentNode;
// If the group already contains the "amf" element, then remove it
var amfShape = $(group).find(".amf");
if (amfShape.length > 0)
{
amfShape.remove();
}
else
{
// Append the SVG element
}
}
工作示例
$('polygon').click(function(evt) {
var e = document.getElementById("kondisi");
var strUser = e.options[e.selectedIndex].value;
if (strUser == "amf")
{
// Find the group that contains the polygon that was clicked on
var group = evt.target.parentNode;
// If the group already contains the "amf" element, then remove it
var amfShape = $(group).find(".amf");
if (amfShape.length > 0)
{
amfShape.remove();
}
else
{
// 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 + ")");
shape.setAttribute("class", "amf");
group.appendChild(shape);
}
}
else if (strUser == "gif")
{
$(evt.target).toggleClass("gif");
}
else if (strUser == "fmc")
{
$(evt.target).toggleClass("fmc");
}
else if (strUser == "mis")
{
var group = evt.target.parentNode;
// If the group already contains the "mis" element, then remove it
var misShape = $(group).find(".mis");
if (misShape.length > 0)
{
misShape.remove();
}
else
{
// 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 line = document.createElementNS(svgns, "path");
line.setAttribute('d', 'M -6,-13 L 6,13 M 6,-13 L -6,13');
line.setAttribute("fill", "none");
line.setAttribute("stroke", "black");
var xPos = bbox.x + bbox.width / 2; // Horizontal centre of the bbox
var yPos = bbox.y + 10; // Middle of the polygons
line.setAttribute("transform", "translate(" + xPos + "," + yPos + ")");
line.setAttribute("class", "mis");
group.appendChild(line);
}
}
});.gif {
fill: #00ff33;
}
.fmc {
stroke-width: 2;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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>
<select id="kondisi">
<option selected="selected" value="amf">amf</option>
<option value="gif">gif</option>
<option value="fmc">fmc</option>
<option value="mis">mis</option>
</select>
答案 1 :(得分：0)
我检查了你的小提琴，以便更好地理解你想要完成的事情。根据我的理解，您似乎正在根据您从下拉列表中选择的选项寻找切换功能。
所以我使用你小提琴的代码在这里创建一个工作片段。我能够让切换功能适用于前三个选项，amf，gif和fmc。我不确定你试图用mis做什么，所以我没有修改任何东西。
事实证明，您并不真正需要点击目标的ID，因为您可以从$(evt.target)获取多边形的句柄。完成后，您可以修改任何属性，或者在某些情况下隐藏单击的多边形元素。
另一个值得注意的重要事项。因为amf选项中的三角形是动态创建的，所以当文档准备好时，它们并不存在于DOM中。因此，为了将点击处理程序绑定到它们，我必须将$('polygon').click(function(evt)更改为$(document).on("click", "polygon", function(evt)。
$(document).on("click", "polygon", function(evt) {
var e = document.getElementById("kondisi");
var strUser = e.options[e.selectedIndex].value;
if (strUser == "amf") {
if ($(evt.target).attr("points") == "-10,0, 10,0, 0,15") {
$(evt.target).hide();
} else {
// 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);
}
} else if (strUser == "gif") {
if ($(evt.target).css("fill") == "rgb(255, 255, 255)") {
$(evt.target).css({
fill: "#00ff33" // Green
});
} else {
$(evt.target).css({
fill: "#ffffff" // White
});
}
} else if (strUser == "fmc") {
if ($(this).attr("stroke-width") === "2") {
$(this).attr("stroke-width", 0.5);
} else {
$(this).attr("stroke-width", 2);
}
} else if (strUser == "mis") {
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 line = document.createElementNS(svgns, "line");
var line2 = document.createElementNS(svgns, "line");
line.setAttribute('id', 'line');
line.setAttribute('x1', '0');
line.setAttribute('y1', '0');
line.setAttribute('x2', '-11');
line.setAttribute('y2', '-25');
line.setAttribute("stroke", "black")
line2.setAttribute('id', 'line2');
line2.setAttribute('x1', '-11');
line2.setAttribute('y1', '0');
line2.setAttribute('x2', '0');
line2.setAttribute('y2', '-25');
line2.setAttribute("stroke", "black");
var xPos = bbox.x + bbox.width / 1.3; // Horizontal centre of the bbox
var yPos = bbox.y + bbox.height / 2; // Bottom of the group bbox
line2.setAttribute("transform", "translate(" + xPos + "," + yPos + ")");
line.setAttribute("transform", "translate(" + xPos + "," + yPos + ")");
group.appendChild(line2);
group.appendChild(line);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="kondisi">
<option selected="selected" value="amf">amf</option>
<option value="gif">gif</option>
<option value="fmc">fmc</option>
<option value="mis">mis</option>
</select>
</div>
<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>