Wie kann ich die ID eines Polygons in einer SVG-Datei erhalten?

Question

Ich habe eine SVG-Datei (Daten/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> 

, und ich will die id "Stirn" anmelden, wenn ich über das svg Element schweben, aber wenn ich meinen Code ausführen i null erhalten.

Hier ist mein d3 Code:

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 

     }) 
    }); 

Wäre sehr dankbar, wenn mir jemand bitte helfen konnte.

Answer 1

ich es gelöst! Was ich getan habe, war ich habe die SVG in diese geladen: https://jakearchibald.github.io/svgomg/ und aufgeräumt und dafür gesorgt, dass jeder in einer einzigen Zeile ist.

Dann schrieb ich ein Skript, um diese Svg-Datei zu öffnen und alle Zeilen zu JSON neu zu formatieren.

Code:

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/>"); } 
      } 
     } 

Dann klebte ich die Ausgabe in eine Datei .json und lud sie. Dann stellte ich mein d3 Skript einfach d.name

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

So ist die beste Art und Weise zu bekommen, dies zu tun war aus Illustrator exportierte mit der SVG-Datei zu vermeiden, aber es json zu konvertieren und diese verwenden.

Answer 2

Ihr innerSVG ist das gesamte SVG. Es hat keine ID namens "Stirn". In Ihrem Code bezieht sich this auf das SVG-Element.

Wenn Sie nur ein Polygon haben, verwenden Sie stattdessen:

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