如何获取SVG文件中的多边形的ID？

Question

我创建了一个SVG文件（数据/ humanTest.svg）：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve"> 

<polygon fill="yellow" id="forehead" stroke="blue" stroke-width="2" points="318.1,24.6 308.7,40.3 308.7,79.6 360.6,82 378.6,46.6 370,8.9 346.4,17.5 "/> 
</svg> 

，我想记录的ID“额头”当我将鼠标悬停在SVG元素，但是当我运行我的代码我得到空。

这里是我的D3代码：

var main_chart_svg = d3.select("#diagram") 
    .append("svg") 
    .attr({ 
     "width": 800, 
     "height": 800 
    }).append('g'); 

d3.xml("data/humanTest.svg").mimeType("image/svg+xml").get(function (error, xml) { 
     if (error) throw error; 

     var svgNode = xml 
       .getElementsByTagName("svg")[0]; 
     main_chart_svg.node().appendChild(svgNode); 

     var innerSVG = main_chart_svg.select("svg"); 

     innerSVG.append("text") 
      .attr("dy", "1em") 
      .attr("dx", "1em") 
      .text("Test text"); 

     innerSVG.on("mousemove", function (d) { 

      //console.log(innerSVG.id); 
      //d3.select("#diagram svg").selectAll("g") 

      console.log(d3.select(this).attr('id')); //doesnt work, 
      //gives me the svg id (Layer_1) not the id of the polygons within the svg tag 

     }) 
    }); 

会很感激，如果任何人都可以请帮助我。

Answer 1

我解决它！我做的是我将SVG加载到这个：https://jakearchibald.github.io/svgomg/并清理它，并确保每个都在一条线上。

然后我写了一个脚本来打开此svg文件，并将所有行重新格式化为JSON。

代码：

OpenFileDialog dlg = new OpenFileDialog(); 
     dlg.DefaultExt = "*.csv"; 
     dlg.Filter = "SVG Files (*.svg)|*.svg|All Files (*.*)|*.*"; 
     DialogResult res = dlg.ShowDialog(); 
     if (res == DialogResult.OK) 
     { 
      txtSource.Text = dlg.FileName; //Textbox to show filepath 
     } 

using (StreamReader sr = new StreamReader(txtSource.Text.Trim(), Encoding.UTF8)) 
     { 
      string line; 
      int ids = 1; 
      StringBuilder json = new StringBuilder(); 
      json.Append("{\"Polygons\": ["); 

      while ((line = sr.ReadLine()) != null) 
      { 
       string[] s = { }; 
       string[] t = { }; 
       string[] v = { }; 
       StringBuilder test = new StringBuilder(); 

       try 
       { 
        if (line.Trim().StartsWith("<poly")) 
        { 
         s = line.Split(new[] { "points=" }, StringSplitOptions.None); 
         t = s[1].Split('/'); 
         string points = t[0].Replace("\"", "").Trim(); 

         v = points.Split(' '); 
         foreach (string xy in v) 
         { 
          string[] z = { }; 
          z = xy.Split(','); 
          test.Append("{\"x\":" + z[0].ToString() + ", \"y\":" + z[1].ToString() + "},"); 
         } 

         //Found the polygon line 
         json.Append("{\"name\": \"polyId_" + ids + "\","); 
         json.Append("\"points\":["); 
         json.Append(test.ToString().TrimEnd(',')); 
         json.Append("]},"); 
         ids++; 
        } 
       } 
       catch { json.Append(line + " ERROR <br/>"); } 
      } 
     } 

然后我粘贴输出到上传.json文件并加载它。然后我调整我的D3脚本只是获得这样做是为了避免使用从Illustrator导出的SVG文件，但将其转换成JSON和使用d.name

svg.selectAll("polygon").on("mousemove", function (d) { 
       Ctooltip.attr("style", "left:420px;top:0px").html(d.name); 
       //console.log(d.name); 
      }) 

所以最好的办法。

Answer 2

您的innerSVG是整个SVG。它没有名为“额头”的ID。在你的代码中，this引用了SVG元素。

如果你只有一个多边形，而不是使用：

console.log(d3.select("polygon").attr('id'));