Question

我无法选择和操作（我想添加点击行为）我在Inkscape中生成的内联svg代码中的路径，然后粘贴到我的html文件中。

<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="905.1372px" height="1100px" viewBox="0 300 721.464 889.561" enable-background="new 0 0 721.464 889.561"
 xml:space="preserve">


<g id="section3">
<path  id="section"
   d="m 433.125,729.14792 -0.17857,32.67857 32.32143,0.44643 15.89286,-0.44643    11.78571,-3.03572 -11.33928,-35.26785 -19.82143,5.625 z"/>
</g>

我尝试过各种各样的方式.. getelementbyid，d3.select（＆＃34;＃id＆＃34;）..任何人都可以帮忙吗？

Answer 1

按ID选择：

d3.select("#section3")

查看此演示，点击您的路径（您必须向下滚动才能找到它）：

d3.select("#section3").on("click", function(){
  console.log("hello");
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="905.1372px" height="1100px" viewBox="0 300 721.464 889.561" enable-background="new 0 0 721.464 889.561"
 xml:space="preserve">


<g id="section3">
<path  id="section"
   d="m 433.125,729.14792 -0.17857,32.67857 32.32143,0.44643 15.89286,-0.44643    11.78571,-3.03572 -11.33928,-35.26785 -19.82143,5.625 z"/>
</g>

d3在svg元素中选择和修改g元素

1 个答案: