在CSS中重新缩放SVG

我有一个在插图中为960pt x 960pt的artbox制作的SVG。我想将其插入到较低维度的网页中。在CSS中重新缩放SVG

我曾尝试以下，以减少它，但它得到了以下的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; 
}

我怎样才能重新调整它没有裁剪？非常感谢

来源

2014-08-27 Spearfisher

您正在寻找体重秤。我可以推荐这个介绍：http://alignedleft.com/tutorials/d3/scales – nothing9 2014-08-27 15:43:29

哇，我花了一段时间才弄清楚你做错了什么。首先viewBox是一个资本B。所以你得到

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

请注意，我声称它必须与空格，而不是逗号。这实际上不是这样的，是我不好，按规格：

由空格和/或逗号

分离这只是规范总是使用空格...

在这里看到： http://jsfiddle.net/4tjoevqo/1/

来源

2014-08-27 15:44:41 user2908232

也可以使用逗号（至少在Chrome中）http://jsfiddle.net/4tjoevqo/2/ – 2014-08-27 15:47:54

@LarsKotthoff：You '对，我的坏。谢谢：） – user2908232 2014-08-27 15:50:25

在CSS中重新缩放SVG

回答

相关问题