d3js svg 在 chrome 中不可见答案

【问题标题】：d3js svg not visible in chromed3js svg 在 chrome 中不可见
【发布时间】：2017-02-10 14:13:09
【问题描述】：

我在我的代码中使用了两个 svg。一个使用 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")
            ;

第一个显示，第二个没有。

【问题讨论】：

标签： javascript google-chrome d3.js svg

【解决方案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>

【讨论】：

我也是这样做的。意味着我在脚本标签中添加了 svg。
您的代码运行良好，但为什么 ` .attr("fill","yellow") .attr("stroke","orange") ` 不起作用？
@learner，svg 元素是一个 HTML 元素。 HTML 元素没有这些属性。 svg 标签内的东西是 svg 元素，大多数都有这些属性。