如何使用javascript从嵌套的svg中的每个标签获取“id”属性？

时间：2021-07-26 08:24:00

I am newbie with javascript and dealing with svg files, but I would like to get the 'id' attribute from each <g> tag in a nested svg through a javascript function depending on which g element is clicked. According to my example I want to get:
MyGroup1
MyGroup2
And how could I save the result as string variable?

我是javascript和处理svg文件的新手,但我想通过javascript函数从嵌套svg中的每个 标签获取'id'属性,具体取决于点击的g元素。根据我的例子我想得到:MyGroup1 MyGroup2我怎么能把结果保存为字符串变量?

Please,I would appreciate if someone could show me how to get this, as I've searched and tried everything I know to try.

如果有人能告诉我如何获得这个,我会很感激,因为我已经搜索并尝试了我所知道的所有尝试。

<html>
<script type="text/javascript">
function(){
//What javascript code should be here?

}
</script>
<body>
<svg 
       width="200" height="200"
       style="background-color: #D2B48C; display: block; margin-bottom: 5px;"
       id="embeddedSVG">
     <g 
        id="myGroup1 onclick="function();" 
        fill="blue" 
        style="font-size: 18px; text-anchor: middle; font-family: serif;">
         <circle
              id="myCircle" 
              cx="100" cy="75" r="50"
              stroke="firebrick"
              stroke-width="3" />
         <text x="100" y="155">Hello World</text>
         <text x="100" y="175">From Embedded SVG!</text>
     </g>
<g id="MyGroup2" onclick="funciont();">
 <rect x="30" y="40" width="180" height="30" fill="#ddd" stroke="black" />
 <text x="50" y="63" font-size="18pt" fill="black">
 Display Msg</text>
</g>
   </svg>
</body>
</html>

1 个解决方案

#1

2  

You can pass this as a parameter to the function.

您可以将此参数作为参数传递给函数。

function showId(g) {
  var str = g.id;
  console.log(str);
}
#embeddedSVG {
  background-color: #D2B48C;
  display: block;
  margin-bottom: 5px;
}
#myGroup1 {
  font-size: 18px;
  text-anchor: middle;
  font-family: serif;
}
<svg width="200" height="200" id="embeddedSVG">
  <g id="myGroup1" onclick="showId(this)" fill="blue">
    <circle id="myCircle" cx="100" cy="75" r="50" stroke="firebrick" stroke-width="3" />
    <text x="100" y="155">Hello World</text>
    <text x="100" y="175">From Embedded SVG!</text>
  </g>
  <g id="MyGroup2" onclick="showId(this)">
    <rect x="30" y="40" width="180" height="30" fill="#ddd" stroke="black" />
    <text x="50" y="63" font-size="18pt" fill="black">Display Msg</text>
  </g>
</svg>

#1

2  

You can pass this as a parameter to the function.

您可以将此参数作为参数传递给函数。

function showId(g) {
  var str = g.id;
  console.log(str);
}
#embeddedSVG {
  background-color: #D2B48C;
  display: block;
  margin-bottom: 5px;
}
#myGroup1 {
  font-size: 18px;
  text-anchor: middle;
  font-family: serif;
}
<svg width="200" height="200" id="embeddedSVG">
  <g id="myGroup1" onclick="showId(this)" fill="blue">
    <circle id="myCircle" cx="100" cy="75" r="50" stroke="firebrick" stroke-width="3" />
    <text x="100" y="155">Hello World</text>
    <text x="100" y="175">From Embedded SVG!</text>
  </g>
  <g id="MyGroup2" onclick="showId(this)">
    <rect x="30" y="40" width="180" height="30" fill="#ddd" stroke="black" />
    <text x="50" y="63" font-size="18pt" fill="black">Display Msg</text>
  </g>
</svg>

标签：

相关文章