修改外部svg

周星星9527

发布于 2021-08-13 15:07:41

1.2K00

代码可运行

文章被收录于专栏：javascript趣味编程javascript趣味编程

运行总次数：0

代码可运行

网页

<html>
<head>
  <title>D3 external svgs</title>
  <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
  <object data="circles.svg" type="image/svg+xml" id="circles"></object>
 
  <script>
  function changeColor() {
    var sel = d3.select(document.getElementById("circles").contentDocument).selectAll("circle");
    if(sel.empty()) {
        setTimeout(changeColor, 100);
    } else {
        sel.attr("fill", "black");
    }
  }
  changeColor();
</script>
 
</body>
</html>

svg

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" >
    <circle id="c_red" fill="#A00" stroke="#000" cx="40" cy="40" r="40"/>
    <circle id="c_grn" fill="#0A0" stroke="#000" cx="60" cy="60" r="40"/>
  </svg>

注意事项：一定要搭建服务器