调整svg图像和区域的大小

Question

这是我第一次使用SVG，如果这是一个愚蠢的问题，我很抱歉，但我正在尝试在我的网站上创建一个可点击的大陆地图，并获得了一个SVG图像，其大陆从维基百科正确映射出来。

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

然而，这个图像是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">

但是，这只会对画布进行缩放，并且不会缩放内部区域。如何将区域缩放到图像的修改尺寸？

Answer 1

SVG将是你在CSS中告诉它的任何大小

JSfiddle Demo

<强> CSS

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

这可以使用或不使用SVG中规定的尺寸。重要的项目是'viewbox'，它设置了SVG的坐标结构。

Answer 2

到目前为止，我找到的唯一方法是将所有区域包装在标签中，并应用

的比例

<g transform="scale(0.68)">

Answer 3

向svg元素添加viewBox属性（viewBox =＆＃34; 0 0 585 299＆＃34;可能是你想要的）。我们可以通过使用片段标识符来模拟看起来像什么，片段标识符会在原始文件上强加一个viewBox，例如。

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

这肯定会在Firefox中显示不同。

Answer 4

像这样使用 viewBox ：

 <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/