javascript - d3 获取具有特殊字符的属性

Question

最近我一直在研究如何使用 d3.js 修改 SVG 文件。 到目前为止，它一直是一个很好用的工具，但现在我遇到了一个小问题。 我用 inkscape 创建了一个 SVG 文件(我们必须使用的工具是内置的)它会在我们必须读取的 SVG 文件上留下一个额外的属性(inkscape:label)在这个额外的属性中我们找到一个带有一些的 Json 字符串有关如何为对象设置动画的额外数据。

但是我似乎无法阅读特殊字符，因为其中包含 : 。 如果我在图像中删除它就可以了。我还尝试使用 \u003A(unicode for :) 转义特殊字符，但似乎没有任何帮助。

但是，如果我使用 native javascript getAttribute("inkscape:label")，它会完美运行。但遗憾的是，这不是解决方案，因为它会破坏一些 d3 的东西。

我怎样才能对 d3.js 做同样的事情？

SVG 文件(属性在底部):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   id="svg2"
   version="1.1"
   inkscape:version="0.48+devel r12830"
   onload="var src; if (document.documentURI) src = document.documentURI; else if (this.getSrc) src = this.getSrc(); else src = document.location.href + ''; try {parent.preload.load(src);}catch(e) {}"
   viewBox="0 0 744.09447 1052.3622"
   sodipodi:docname="drawingSVG.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="-823.57143"
     inkscape:cy="520"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1920"
     inkscape:window-height="1027"
     inkscape:window-x="-8"
     inkscape:window-y="22"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Laag 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       sodipodi:type="star"
       style="fill:#ffff00;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       id="path3262"
       sodipodi:sides="5"
       sodipodi:cx="237.14284"
       sodipodi:cy="232.36218"
       sodipodi:r1="172.02278"
       sodipodi:r2="86.011391"
       sodipodi:arg1="2.1311562"
       sodipodi:arg2="2.7594747"
       inkscape:flatsided="false"
       inkscape:rounded="0"
       inkscape:randomized="0"
       d="M 145.71427,378.07647 157.33485,264.43467 70.307332,190.43663 181.97807,166.37122 225.4614,60.736482 l 57.39572,98.768558 113.9017,8.71217 -76.19823,85.10774 26.91179,111.01916 -104.48882,-46.16908 z"
       inkscape:transform-center-x="3.6097674"
       inkscape:transform-center-y="-12.95571"
       inkscape:label="{&quot;attr&quot;:&quot;color&quot;,&quot;list&quot;:[{&quot;data&quot;:&quot;2&quot;,&quot;param&quot;:&quot;#EF8C8C&quot;,&quot;tag&quot;:&quot;aTag&quot;}]},{&quot;attr&quot;:&quot;opac&quot;,&quot;max&quot;:20,&quot;min&quot;:0,&quot;tag&quot;:&quot;aTag2&quot;}" />llk
  </g>
</svg>

然后我尝试获取 inkscape:label 属性的值:

console.log(d3.select("#path3262").attr("inkscape:label"));

可悲的是，这没有用

console.log(document.getElementById("path3262").getAttribute("inkscape\u003Alabel"));

如果我用

访问它

console.log(document.getElementById("path3262").getAttribute("inkscape:label"));

它可以工作，或者如果我更改 svg 文件中的 inkscape:label 和 d3 代码，它也可以工作

Answer 1

名称中的冒号通常为冒号后的名称定义命名空间。 D3 有代码来处理这个问题，以避免必须在任何地方显式指定命名空间。不幸的是，当它试图将前导 inkscape 解释为命名空间时，这会破坏您的情况。

虽然解决方法很简单——只需添加另一个冒号作为您的选择器的前缀。 D3 将提取这个空的“命名空间”并将字符串的其余部分解释为在默认命名空间中。

console.log(d3.select("#path3262").attr(":inkscape:label"));

完整演示 here .