Question

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

然而，我似乎无法阅读特殊字符因为：在其中。如果我在图像中删除它就可以了。我还尝试使用\u003A（unicode for :)来逃避特殊字符，但似乎没有任何帮助。

但是，如果我使用原生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：标签和d3代码它也可以工作

Answer 1

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

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

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

完整演示here。

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

1 个答案: