viewBox屬性與SVG的高度和寬度屬性設置

如果你看它有width和height屬性，並視框this jsbin SVG圖像屬性設置：viewBox屬性與SVG的高度和寬度屬性設置

var width = width + margin.left + margin.right; 
var height = height + margin.top + margin.bottom; 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .attr('viewBox', '0 0 ' + width + ' ' + height) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

然後SVG沒有規模可言。

但是，如果我然後註釋掉寬度和高度屬性，那麼它看起來像this bin一樣縮放。

我非常困惑的viewBox屬性，我看到很多在線寬度，高度和viewBox屬性都設置的例子。有寬度和高度屬性時，我將viewBox屬性視爲否定。

我也對viewBox的寬度和高度屬性實際上對應於實際空間感到困惑。

文檔說您指定了自己的座標系，但我不明白這是什麼意思，以及寬度和高度如何對應文檔的實際寬度和高度。

來源

2017-06-02 dagda1

[svg viewBox屬性]的可能重複（https://stackoverflow.com/questions/15335926/svg-viewbox-attribute） –

tl;dr:viewBox是什麼繪製的SVG內，width和height告訴在什麼大小來顯示它。

viewBox定義了您正在繪製SVG的畫布和座標系。如果說viewBox="10 50 100 100"，和你想得出，涵蓋了圖像的左上角季度廣場，你會寫：

<svg viewBox="10 50 100 100" xmlns="http://www.w3.org/2000/svg"> 
    <rect x="10" y="50" width="50" height="50" /> 
</svg>

然後，當你想顯示你的SVG，例如內嵌到HTML頁面，寬度和高度告訴在什麼尺寸顯示它們，就像你會爲一個圖像標記：

<div> 
    <svg width="250" height="250" viewBox="10 50 100 100" 
     xmlns="http://www.w3.org/2000/svg"> 
    <rect x="10" y="50" width="50" height="50" /> 
    </svg> 
</div>

如果您的SVG被保存爲一個外部文件drawing.svg，你可以表達爲

同樣的效果

<div> 
    <img src="drawing.svg" width="250" height="250" /> 
</div>

在這兩種情況下，您繪製的正方形都會覆蓋圖像的左上角四分之一，但由於SVG是以250像素×250像素的總大小繪製的，所以正方形的邊長爲125像素×125像素。

換句話說，如果在視框限定的寬度是a，而元素上定義的寬度是b，效果是一樣的SVG（水平），用b/a的因子縮放內的一切。

（這顯然打開了當視框高度c怎麼辦的問題，元素高度爲d，而比值d/c ≠ b/a不匹配？那是什麼preserveAspectRatio屬性描述。）

形式上，每個組合width,height,viewBox和preserveAspectRatio可以等同地寫爲transform屬性。對此的算法描述爲here。（請注意，對於此示例中使用的<svg>元素，x和y屬性必須始終爲0。）

來源

2017-06-02 17:38:20 ccprog

viewBox屬性與SVG的高度和寬度屬性設置

回答

相關問題