从 js 组合时忽略 SVG View 框

Question

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

在 JS 中， View 框被忽略，如 here .但是，如果我将 JS 生成的代码作为 HTML 放入，它将使用 View 框呈现，如 here 所示。 .

为什么在 js 中定义时会忽略 View 框，而在 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 中找到