调整 svg 图像和区域的大小答案

【问题标题】：Resize svg image and areas调整 svg 图像和区域的大小
【发布时间】：2014-11-04 01:20:11
【问题描述】：

这是我第一次使用 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">

但是，这只会缩放画布本身，而不会缩放内部区域。如何让区域缩放到修改后的图像尺寸？

【问题讨论】：

标签： html css image svg

【解决方案1】：

将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 中显示不同。

【讨论】：

【解决方案2】：

SVG 将是您在 CSS 中指定的任何大小

JSfiddle Demo

CSS

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

无论有无 SVG 中规定的尺寸，这都适用。重要的项目是设置 SVG 坐标结构的“视图框”。

【讨论】：

【解决方案3】：

像这样使用 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/

【讨论】：

上面应该可以正常工作，但是宽度和高度仍然固定为绝对值（292pt x 137pt）。我会省略宽度和高度属性，让 CSS 处理 svg 的大小，例如 svg { width: 100%; }。

【解决方案4】：

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

<g transform="scale(0.68)">

【讨论】：