Question

我有一个用插图画家制作的SVG用于960pt x 960pt的彩盒。我想将它插入到较低维度的网页中。

我试图关注它以减少它，但它会像下面的jsfiddle一样被裁剪：http://jsfiddle.net/4tjoevqo/

d3js：

var svg = d3.select("body")
          .append('svg')
          .attr('width', '960px')
          .attr('height', '960px');

svg.append('g').append('circle')
  .attr('cx', 480)
  .attr('cy', 480)
  .attr('r', 284.5);

CSS：

svg {
    width: 400px;
    height: 400px;
}

如何在不裁剪的情况下重新缩放它？非常感谢

Answer 1

哇，我花了一段时间弄清楚你做错了什么。首先viewBox使用大写B。所以你得到了

.attr("viewBox",'0 0 1000 1000');

请注意，我声称必须使用空格而不是逗号。事实并非如此，我的不好，按照规范：

以空格和/或逗号分隔

只是规范总是使用空格......

见这里：http://jsfiddle.net/4tjoevqo/1/

在CSS中重新调整SVG

1 个答案: