調整大小SVG圖像和地區

這是我第一次使用SVG所以道歉，如果這是一個愚蠢的問題，但我想創建我的網站上點擊大陸地圖，並已經獲得來自維基百科映射出正確大陸的SVG圖像。調整大小SVG圖像和地區

http://commons.wikimedia.org/wiki/File:Continents.svg

Map

然而，這種圖像是585 X 299像素和我需要的形象是292 X 137像素。我看網上，這些圖像是可擴展的，所有你需要做的是在SVG定義修改寬度和高度值，所以我已經這樣做了這裏：

<svg width="292" height="137" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">

但是，這僅縮放畫布這樣並且不擴展內部區域。如何讓區域縮放到圖像的修改後的尺寸？

Rendered map

來源

2014-09-10 jezzipin

的SVG將是任何大小，你告訴它在CSS

JSfiddle Demo

CSS

svg { 
    width:292px; 
    height:137px; 
    border:1px solid grey  
}

這工作有或沒有在規定SVG的尺寸。重要的項目是設置SVG的座標結構的'viewbox'。

來源

2014-09-10 12:31:23

我到目前爲止發現的唯一辦法是換我的所有領域的一個標籤，他們申請的

<g transform="scale(0.68)">

來源

2014-09-10 12:01:00 jezzipin

的比例添加viewBox屬性（視框=「0 0 585 299「可能是你想要的）到svg元素。我們可以通過使用將在原始文件上施加viewBox的片段標識符來模擬看起來像什麼，例如

http://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svg#svgView(viewBox(0,0,529,290))

這肯定會在Firefox中顯示不同。

來源

2014-09-10 12:01:35

我已經嘗試過這種方法，它不起作用。 – jezzipin 2014-09-10 12:22:47

使用視框這樣的：

<svg 
xmlns="http://www.w3.org/2000/svg" 
version="1.0" 
width="292pt" height="137pt" 
viewBox="0 0 468 239" 
preserveAspectRatio="xMidYMid meet" 
> 
<g 
transform="translate(0,239) scale(0.016963,-0.016963)" 
fill="#000000" 
stroke="none" 
>

http://jsfiddle.net/Vac2Q/4147/

來源

2014-09-10 12:07:19

我已經試過這種方法，它不起作用。 – jezzipin 2014-09-10 12:23:20

上面應該很好，但寬度和高度仍然固定爲絕對值（292pt x 137pt）。我會忽略寬度和高度屬性，讓CSS處理svg的大小，例如'svg {width：100％; }'。 – 2014-09-10 14:07:41

調整大小SVG圖像和地區

回答

相關問題