css - SVG中的命名空间属性（嵌入在HTML文档中）

使用d3.js我想将特定命名空间的属性插入SVG元素（嵌入HTML5文档中），更准确地说是that。

所以我有以下JavaScript：

d3.select("body")
    .append("svg")
    .attr({width: 100, height: 100})
    .append("rect")
        .attr({width: 100, height: 100})
        .attr("myns:foo", "bar");

CSS：

rect[foo] {
    fill: red;
}

rect[myns\:foo] {
    fill: green;
}

结果：

<html>
  <head>…</head>
  <body>
    <svg width="100" height="100">
      <rect width="100" height="100" foo="bar"></rect>
    </svg>
  </body>
</html>

参见 JSFiddle

我希望生成的矩形为绿色，但它是红色的。我也想知道为什么该属性不是myns:foo。

我还尝试了d3.ns.prefix（直到我阅读that）和CSS3 @namespace，但没有成功。

那么你可以向我解释为什么上面的代码没有按预期工作，你能提供替代方案吗？

SVG中的命名空间属性（嵌入在HTML文档中）

0 个答案: