SVG图像 - 缩放和边框

Question

我有一个小的svg文件，放在这里：http://dl.dropbox.com/u/7393/hmap.svg，我想把它改成这个样子：http://dl.dropbox.com/u/7393/final.png

我从文档中了解到，只需要改几个标签就能轻松实现这个变化。但是我尝试了很多修改，还是无法做到：1) 放大，2) 裁剪，3) 把边框变成白色。

这里有没有人对svg（xml）图像文件格式比较熟悉，能给我一些建议呢？

谢谢。

Answer 1

要放大图像，你需要调整视口设置。这个文件在最上面的svg标签里使用了一个视口。你现在用的视口是整个图像的 viewBox="0 -500 2752.766 2537.631"，而你把它放在一个高 height="476.7276" width="634.26801" 像素的框里。所以一条宽1个单位的线大约只有1/5个像素宽。

如果你想放大，比如说欧洲，可以把它改成 viewBox="1000 -500 1000 1000"。这基本上是说从左边开始1000个单位，从顶部开始-500个单位，然后向右裁剪1000个单位，向下裁剪1000个单位。

白线的宽度是 stroke-width:0.99986893; 单位。要让它变成整整一个像素，你需要更近地放大。可以用 viewBox="1200 -5 450 450"。

你在文档的顶部使用了样式和内联样式，内联样式会覆盖其他样式。

<g class="land fr" id="fr" 
 transform="matrix(1.229834,0,0,1.1888568,-278.10861,-149.0924)" 
 style="fill-opacity:1;stroke:#ffffff;stroke-width:10;
       stroke-miterlimit:3.97446823;stroke-dasharray:none;stroke-opacity:1;
       fill:#00ff00">

在640 x 480的屏幕上显示完整大小的图像时，线条宽度大约设置为10应该可以正常工作，但这样做需要在每个元素上都设置。

<path d="M 2218.0062,810.62352 C 2217.5173,811.14292 2217.698,811.38357
         2218.5472,811.34547 C 2218.3665,811.10481 2218.1868,810.86417 
         2218.0062,810.62352" 
 id="path2404" 
 style="fill-opacity:1;stroke:#ffffff;stroke-width:0.99986994;
       stroke-miterlimit:3.97446823;stroke-dasharray:none;stroke-opacity:1;
       fill:#6BAED6">

或者需要从元素中移除样式，以使用父级样式。

<path d="M 2218.0062,810.62352 C 2217.5173,811.14292 2217.698,811.38357 
         2218.5472,811.34547 C 2218.3665,811.10481 2218.1868,810.86417 
         2218.0062,810.62352" id="path2404">