调整大小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图像和地区

回答

相关问题