使用D3生成的SVG无法像看似相同的静态SVG内容一样进行缩放

Question

我正在使用d3生成一个SVG可视化图表，希望它能以响应式的方式随容器缩放。我可以直接创建一个具有这种行为的SVG元素，但当我编写生成相同SVG标记的d3脚本时，它无法自适应缩放。

以下是生成SVG元素的d3代码：

var arc = d3.svg.arc()
    .startAngle(0)
    .innerRadius(36)
    .outerRadius(48);

var svg = d3.select('#d3').append('svg')
            .attr('width', '100%')
            .attr('height', '100%')
            .attr('viewbox', '0, 0, 100, 100')
            .attr('preserveAspectRatio', 'xMidYMid')
            .append('g')
                .attr('transform', 'translate(50, 50)');

var loop = svg.append('g')
    .attr('class', 'percent-wheel');

loop.append('path')
    .attr('class', 'background')
    .attr('d', arc.endAngle(2 * Math.PI));

以下是翻译后的内容：

这里是生成的 SVG 标记，当静态插入到 DOM 中时会正确缩放：

<div id="d3" class="container">   
  <svg preserveAspectRatio="xMidYMid" viewbox="0, 0, 100, 100" height="100%" width="100%">
    <g transform="translate(50, 50)">
      <g class="percent-wheel">
        <path d="M0,48A48,48 0 1,1 0,-48A48,48 0 1,1 0,48M0,36A36,36 0 1,0 0,-36A36,36 0 1,0 0,36Z" class="background"></path>
      </g>
    </g>
  </svg>
</div>

您可以在这里看到一个实时示例： http://jsfiddle.net/HMQGq/

有人能解释一下用d3创建的svg与其他方式不同的原因是什么吗？

- Matt Cheely

---

我不确定我是否理解你的意思。当我调整窗口大小时，两个圆都没有缩放。 - Lars Kotthoff

抱歉如果没有表达清楚。一个圆已经缩放到其容器元素的大小（即.container div），另一个没有。 - Matt Cheely

你的属性定义中有一个错别字，应该是viewBox而不是viewbox。 - Lars Kotthoff

很有趣 - 并解决了我的问题 - 谢谢！出于好奇：您知道为什么在d3中拼写错误会导致问题，但在静态标记中不会吗？ - Matt Cheely

有趣的是，这在Chrome、IE和Firefox中都发生了（即我快速检查的所有浏览器）。 - Christopher Hackett

Answer 1

问题在于属性定义中的拼写错误 -- 应该是viewBox而不是viewbox。

- Lars Kotthoff