svg图像-缩放和边框 [英] svg image - zoom and borders

问题描述

我在下面托管了以下小型svg文件: http://dl.dropbox. com/u/7393/hmap.svg ，而我试图使它看起来像这样:

I have the following small svg file hosted at: http://dl.dropbox.com/u/7393/hmap.svg and I am trying to make it look like this: http://dl.dropbox.com/u/7393/final.png

我从中获得此信息的文档提到，可以通过更改svg文件上的几个标签来轻松获得此更改.但是，我尝试更改所有内容，但仍然无法进行以下操作:1)缩放，2)裁剪，3)将边框设为白色.

The docs where I got this from mentions that this change can be easily obtained by changing a couple of tags on the svg file. However I have tried changing everything and I still can't 1) Zoom, 2) Crop, 3) Make the borders white.

这里的任何人是否熟悉svg(xml)图像文件格式，以便在这里为我指明正确的方向?

Does any one here have familiarity with svg (xml) image file format to point me in the right direction here?

谢谢.

推荐答案

要缩放，请更改视图框设置.该文件在文件顶部的第一个和唯一的svg标记中使用一个.您正在使用的视图框用于完整图像viewBox="0 -500 2752.766 2537.631"，并将其放置在具有height="476.7276" width="634.26801"像素的框中.因此，每1单位宽的线大约是一个像素的1/5.

To zoom change the viewbox setting. The file uses one on the first and only svg tag at the top of the file. The viewbox you are using is for the full image viewBox="0 -500 2752.766 2537.631" and you are placing it into a box with height="476.7276" width="634.26801" pixels. So a line 1 unit wide would be about 1/5 of a pixel.

放大以表示欧洲，将其更改为... viewBox="1000 -500 1000 1000" ...这基本上是说从左侧的1000单位开始，从顶部的-500单位开始，向右裁剪1000单位，向下裁剪1000单位

To zoom in on say Europe change it to ... viewBox="1000 -500 1000 1000" ... this basically says start at unit 1000 from the left and -500 units from the top and crop at 1000 units to the right and 1000 units down.

白线是stroke-width:0.99986893;单位.要使它们成为整个像素，您需要放大一点. viewBox="1200 -5 450 450"

The white lines are stroke-width:0.99986893; units. to make them a whole pixel you would need to zoom in closer. viewBox="1200 -5 450 450"

您同时使用文档顶部的样式和内联样式，内联样式会覆盖其他任何样式.

You are using both style at the top of the document and inline styles, the inline styles overwrite any other styles.

<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(在第一个也是唯一的svg标签中设置的宽度和高度)中显示的完整尺寸，大约10的笔触宽度应该起作用-但是要做到这一点，它需要在每个元素上完成

A stroke width of about 10 should work for the full sized being displayed in a 640 x 480 (the width and height set in the first and only svg tag) screen - but to do this it needs to be done on every element

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

或需要从元素中删除样式以使用父样式.

or the style needs to be removed from the elements to use the parent style.

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

这篇关于svg图像-缩放和边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！