Question

下面，我在工作区域中自定义了SVG-EDITOR以及更改右键单击选项。我正在努力使用java-script从SVG中的Rect,Line,Path and etc标签中获取<g>等特定标签在这里，我使用此代码获取特定标签节点名称。

var test =selectedElement.nodeName;

它对我来说很好，它会显示为 rect，line和path。 但我有动态<g>标记，rect, line也放在该组标记内。这里是示例代码

    <g id="svg_28">
           <rect stroke_width="0" id="svg_1" height="141" width="398" y="68" x="399" 
    stroke-width="2" stroke="#000000" fill="#f7b7b2"/>
          </g>

          <g id="svg_33">
           <path id="svg_2" 
d="m508,106c-1,0 606,-26 606,-26c0,0 -573,125 -573,125c0,0 -33,-99 -33,-99z"  stroke-width="0" stroke="#000000" fill="#729FCF"/>
          </g>

并尝试使用此方法在标签nodename中获取标签

console.log(elem.getBBox());
console.log(elem.getBoundingClientRect());

但它只导致对象的 x，y，left，right，top，bottom，width，height 。我需要所选标签对象的节点名称。如何获取选择节点名称？是否可以获取选定的节点名称？

Answer 1

将解析svg和每个标记的函数将执行某些操作

    var g = "g";
    var path = "path";
    var rect = "rect";
    var circle = "circle";
    var line = "line";
    var polygon = "polygon";

    // will parse the svg and on each tag element will do something
    // el is the element ex $('.mySVG')
    var svgTags = function(el){
        el.children().each(function(){
            if($(this).is(g)){
                svgTags($(this));
            }else if($(this).is(path)){
                // do something
            }else if($(this).is(rect)){
                // do something
            }else if($(this).is(circle)){
                // do something
            }else if($(this).is(line)){
                // do something
            }else if($(this).is(polygon)){
                // do something
            }
        });
    }

如何使用Javascript在SVG中的g（组）标签中获取特定标签

1 个答案: