从js编写时忽略SVG视图

Question

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

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

为什么在js中定义时忽略了视图框，但在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 Specifications

中找到更多信息

Answer 2

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