当我在 HTML 源代码中绘制带有 viewBox 属性的 SVG 时，我可以重新调整窗口大小，并且我的 SVG 会自动缩放。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-350 -250 700 500">
<circle r="200" class="face" fill="green"/>
<path fill="none" class="face"
transform="translate(-396,-230)"
d="M487.41, 282.411c-15.07, 36.137-50.735, 61.537-92.333,
61.537 c-41.421, 0-76.961-25.185-92.142-61.076"/>
<circle cx="-60" cy="-50" r="20" fill="black"/>
<circle cx="60" cy="-50" r="20" fill="black"/>
</svg>
但是当我用 D3.js 构造完全相同的SVG 时，viewBox 不起作用！
var smileyRed = d3.select("#js")
.append("svg")
.attr("xmlns", "http://www.w3.org/2000/svg")
.attr("viewbox", "-350 -250 700 500");
smileyRed.append("circle")
.attr('r','200')
.attr('class','face')
.attr('fill','red');
smileyRed.append("path")
.attr('fill','none')
.attr('class','face')
.attr('transform','translate(-396,-230)')
.attr('d','M487.41, 282.411c-15.07, 36.137-50.735, 61.537-92.333,
61.537 c-41.421, 0-76.961-25.185-92.142-61.076');
smileyRed.append("circle")
.attr('cx','-60')
.attr('cy','-50')
.attr('r','20')
.attr('fill','black');
smileyRed.append("circle")
.attr('cx','60')
.attr('cy','-50')
.attr('r','20')
.attr('fill','black');