调整SVG图片和区域的大小

Question

这是我第一次使用SVG，如果这是一个愚蠢的问题，请您道歉，但我正尝试在我的网站上创建可点击的大陆地图，并已从Wikipedia获得了正确绘制了各大陆的SVG图像。

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

但是，此图像为585 x 299像素，我需要的图像为292 x 137像素。 我已经在线阅读了这些图像的可伸缩性，而您需要做的就是修改svg定义中的width和height值，因此我在这里做了以下操作：

<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演示

CSS

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

无论有无SVG中规定的尺寸，此功能均适用。 重要的是“视图框”，它设置了SVG的坐标结构。

Answer 2

到目前为止，我发现的唯一方法是将我的所有区域都包裹在一个标签中，并且它们应用

<g transform="scale(0.68)">

Answer 3

将viewBox属性（viewBox =“ 0 0 585 299”可能是您想要的）添加到svg元素。 我们可以通过使用片段标识符来模拟看起来像什么，该标识符将在原始文件上添加一个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/