在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

回答

相關問題