[英]Resize svg image and areas
This is my first time using SVG so apologies if this is a stupid question but I am trying to create a clickable continent map on my site and have acquired an SVG image with the continents mapped out correctly from wikipedia. 这是我第一次使用SVG,如果这是一个愚蠢的问题,请您道歉,但我正尝试在我的网站上创建可点击的大陆地图,并已从Wikipedia获得了正确绘制了各大陆的SVG图像。
http://commons.wikimedia.org/wiki/File:Continents.svg
However, this image is 585 x 299 pixels and I require an image that is 292 x 137 pixels. 但是,此图像为585 x 299像素,我需要的图像为292 x 137像素。 I've read online that these images are scalable and that all you need to do is modify the width and height value in the svg definition so I have done so here:
我已经在线阅读了这些图像的可伸缩性,而您需要做的就是修改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">
However, this only scales the canvas as such and does not scale the internal areas. 但是,这只会按比例缩放画布,而不会缩放内部区域。 How do I get the areas to scale to the modified dimensions of the image?
如何获得可缩放到图像修改尺寸的区域?
The SVG will be any size you tell it to in the CSS SVG可以是您在CSS中告诉它的任何大小
CSS CSS
svg {
width:292px;
height:137px;
border:1px solid grey
}
This works with or without the dimensions stated in the SVG. 无论有无SVG中规定的尺寸,此功能均适用。 the important item is the 'viewbox' which sets the co-ordinate structure for the SVG.
重要的是“视图框”,它设置了SVG的坐标结构。
到目前为止,我发现的唯一方法是将我的所有区域都包裹在一个标签中,并且它们应用
<g transform="scale(0.68)">
Add a viewBox attribute (viewBox="0 0 585 299" is probably what you want) to the svg element. 将viewBox属性(viewBox =“ 0 0 585 299”可能是您想要的)添加到svg元素。 We can simulate what that would look like by using a fragment identifier which will impose a viewBox on the original file eg
我们可以通过使用片段标识符来模拟看起来像什么,该标识符将在原始文件上添加一个viewBox,例如
http://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svg#svgView(viewBox(0,0,529,290))
That sure displays differently in Firefox. 那在Firefox中的显示肯定不同。
Use a viewBox like this : 使用这样的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/ http://jsfiddle.net/Vac2Q/4147/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.