svg - 从 js 编写时忽略 SVG 视图框

Question

我正在使用使用视图框的 d3.js 创建 SVG。

从 JS 中，视图框被忽略，如此处所示。但是，如果我将 JS 生成的代码作为 HTML 放入，它会使用视图框呈现，如此处所示。

为什么在js中定义时viewbox被忽略，而在html中定义时却没有？

代码如下

var svg = d3.select('body')
.append('svg')
  .attr("height", 400)
  .attr("width", 400)
  .attr("viewbox",'0,0,100,100')
  .attr('style','border: 1px solid black')
.append('rect')
  .attr('x',0)
  .attr('y',0)
  .attr('width',100)
  .attr('height',100)
  .attr('fill','red');

Answer 1

SVG 中的属性区分大小写。多字属性在 camelCase 中定义：

.attr("viewBox",'0,0,100,100')

更多信息可以在W3C 规范中找到

Answer 2

看起来原因是一个简单的错字 - 它应该是viewBox而不是viewbox。似乎（至少 Chrome）在页面加载时会自动更正此问题。