將SVG縮放到沒有蒙版/作物的容器

我已經嘗試了很多svg參數的變體，但在縮放這個特定的SVG方面沒有任何喜悅。將SVG縮放到沒有蒙版/作物的容器

我試圖將this SVG包含到控制SVG大小的容器元素中。

我瞄準的是500x309px。

什麼組合width，height，viewBox和preserveAspectRatio可以幫助我實現這個不具有SVG掩蓋或不全？

2012-03-05 sgb

我假設你不想要非均勻縮放：你不希望地圖根據容器拉伸或擠壓。如果容器是1000x100，您希望地圖高100px;如果100x1000你想要100px寬。正確？ – Phrogz 2012-03-05 20:16:01

你絕對必須有你的SVG元素上viewBox屬性描述的你想成爲總是可見的內容的邊框。（你鏈接到該文件不。你要添加一個）
爲了使您的SVG，以填補一個HTML元素，把CSS屬性position:relative（或position:absolute或position:fixed如果合適的話）在您的包裝，然後
在您的<svg>元素上設置CSS屬性position:absolute，使其位於內部並填充您的div。（如果必要的話，也適用left:0; top:0; width:100%; height:100%）

一旦你有一個viewBox和您的SVG尺寸正確的preserveAspectRatio屬性的默認值會做你想要什麼。特別是，默認xMidYMid meet意味着：

您的viewBox所描述的長寬比將在渲染時保留。
通過比較，值爲none將允許非均勻縮放。
viewBox將始終meet頂部/底部或左/右，'letterboxing'保持其他維度內。
比較而言，值爲slice可確保您的viewBox完全填充渲染，並且頂部/底部或左/右落在SVG之外。
viewBox將保持垂直和水平居中在SVG視口內。
比較而言，值xMinYMax會將其保留在左下角，只有右側或頂部填充。

你可以看到這個住在這裏：http://jsfiddle.net/Jq3gy/2/

嘗試<svg>元素，然後按「更新」關於preserveAspectRatio指定明確的值，看看它們是如何影響渲染。

編輯：我創建了US Map with a viewBox（幾乎一半的字節）的簡化版本，並使用在更新的演示，以滿足您的需求：http://jsfiddle.net/Jq3gy/5/

2012-03-05 20:58:21 Phrogz

太棒了;謝謝。 – sgb 2012-03-06 10:15:04

爲了澄清我的疑問，要填充包含div的svg，您要求指定svg的絕對位置。但是svg擴展了高度和寬度，沒有指定svg上的絕對位置或者相對於容器div的位置（通過修改日食的例子來檢查） – rajkamal 2012-03-13 09:36:58

Just awesome。與美國地圖一起使用，直接適用於我想要使用的東西。感謝您的洞察力。 – mikevoermans 2013-02-26 20:44:52

不幸的是，我不知道，適用於原SVG的答案，但在Raphael.js，我做了這樣的：

var paper = Raphael('#container', your_container_width, your_container_height); 
paper.setViewBox(realSvgWidth, realSvgHeight, true);

這種技術縮放我的SVG，以適應範圍。

希望這會有所幫助。

2012-03-05 13:21:41 Valentin

設置SVG的寬度和高度爲它的容器的大小，並設置preserveAspectRatio = none。

<div height="50" width="100"> 
    <svg preserveAspectRatio="none" viewBox="0 0 300 200"></svg> 
</div>

和

$("svg").each(function(){ 
    this.width = this.parentNode.width; 
    this.height = this.parentNode.height; 
}

就是這樣。不需要設置CSS。

我個人將viewBox設置爲SVG的內容的大小。所以在我的例子中，我加載到SVG中的原始圖像是300x200。它將縮小到適合50x100格。但viewBox操作是一個單獨的問題。

2014-11-08 04:37:00

回答