Question

使用以下鳕鱼我从服务器读取一个svg字符串并将其放入dom。

HttpRequest.getString('http://das-struxt.net/service/getText/filename/top-rubrik.svg').then((String results ) {
   print(results);
   var validator = new NodeValidatorBuilder()
      ..allowHtml5()
      ..allowSvg();

   DivElement dcontainer = new DivElement();
   dcontainer.id="content";
   dcontainer.setInnerHtml(results, validator: validator);
   document.querySelector('#primary').append(dcontainer);
});

这真的很好。 svg流看起来像这样：

<svg width="980pt" height="346pt"
   viewBox="0.00 0.00 980.00 346.00"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">

<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 342)">
 <title>TRTopRubriken</title>
 <polygon fill="white" stroke="none" points="-4,4 -4,-342 976,-342 976,4 -4,4"/>
  <!-- Angebote -->
  <g id="node1" class="node"><title>Angebote</title>
  <g id="a_node1">
   <a xlink:href="http://das-struxt.net/getrubrik/rubrik/Angebote"   

    xlink:title="Angebote" 
     xlink:id="info_angebote">
     <polygon fill="green" .../>
     <text text-anchor=....fill="white">Angebote</text>
    </a>

但我尝试在点击锚点时获取id info_angebote我得到一个没有id的元素

document.body.onClick.listen((e) {   
  var clickedElem = e.target;
  var attr = clickedElem.attributes;
  attr.forEach((k,v) => print(k+'='+v));
  print('You clicked the ${clickedElem.id}- Element');
  populateAllClicks(e,clickedElem.id);
});

然后我打印出以下结果。

text-anchor=middle
x=160
y=-318.7
font-family=sans serif
font-size=6.00
fill=white
**You clicked the - Element**

首先：为什么这段代码不起作用？

第二：是否有一个更好的解决方案，可以使用像svg中的按钮这样的一些按钮，稍后我可以在onclick-Method中使用它来进行进一步的REST查询 谢谢Christian（弗伦斯）

Answer 1

所以......这是解决方案：

首先，document.onClick始终返回textNode而不是锚点。这就是为什么我必须对您的代码进行一些修改的原因。这是解决方案：

import 'dart:html';

void main() {
  HttpRequest.getString('sample.svg').then((String results ) {
     var validator = new NodeValidatorBuilder()
        ..allowHtml5()
        ..allowSvg();

     DivElement dcontainer = new DivElement();
     dcontainer.id="content";
     dcontainer.setInnerHtml(results, validator: validator);
     document.querySelector('#svg').append(dcontainer);

     document.querySelector('#content a').onClick.listen((MouseEvent e) {
       e.preventDefault();
       Element a = e.currentTarget;
       print("href:" + a.getAttributeNS('http://www.w3.org/1999/xlink', 'href'));
       print("title:" + a.getAttributeNS('http://www.w3.org/1999/xlink', 'title'));
       print("id:" + a.getAttributeNS('http://www.w3.org/1999/xlink', 'id'));
       var attr = a.getNamespacedAttributes('http://www.w3.org/1999/xlink');
       attr.forEach((k,v) {
         print(k + " = " + v);
       });
     });
  });
}

还有

a.getNamespacedAttributes('http://www.w3.org/1999/xlink')

但是这并没有给我属性的值。

重要提示： xlink命名空间没有定义id属性，因此您将获得＆＃34; id＆＃34;的空字符串。

<svg width="980pt" height="346pt"
   viewBox="0.00 0.00 980.00 346.00"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">

<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 342)">
 <title>TRTopRubriken</title>
 <polygon fill="white" stroke="none" points="-4,4 -4,-342 976,-342 976,4 -4,4"/>
  <!-- Angebote -->
  <g id="node1" class="node"><title>Angebote</title>
  <g id="a_node1">
   <a xlink:href="http://das-struxt.net/getrubrik/rubrik/Angebote"   

    xlink:title="Angebote" 
     xlink:id="info_angebote">
     <polygon fill="green" .../>
     <text text-anchor=....fill="white">Angebote</text>
    </a>
  </g>
  </polygon>
  </g>
</svg>

此致罗伯特

将graphviz有向图转换为svg并包含在dart web应用程序中。但onclick方法无法使用锚点

1 个答案: