Question

我在代码中使用了两个svgs。一个是使用HTML，另一个是使用d3：

    <svg>
        <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
    </svg>

 var svg = d3.select("body")
            .append("xhtml:div")
            .append("svg")
            .attr("width",500)
            .attr("height",50)
            .attr("fill","yellow")
            .attr("stroke","orange")
            ;

第一个显示，第二个不显示。

Answer 1

这是你的实际代码吗？ d3是JavaScript，如果要将其嵌入HTML中，则需要脚本标记。此外，SVG元素没有填充或描边属性。您应该像使用CSS的任何传统 html元素一样设置样式。

<script src="//d3js.org/d3.v4.js"></script>

<svg>
  <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00" />
</svg>

<script>
  var svg = d3.select("body")
    .append("xhtml:div")
    .append("svg")
    .attr("width", 500)
    .attr("height", 50)
    .style("background-color", "yellow")
    .style("border", "2px solid orange");
</script>

d3js svg在chrome中不可见

1 个答案: