开发者

Enlarge interactive map - specifically an svg

I've used this tutorial - http://www.netzgesta.de/mapper/ to create an interactive map (http://teamworksdesign.com/clients/neurosign/contact/alabama/), the problem is I want to enlarge it by 10-20% to fill the space a bit better.

I've used these two images:

Enlarge interactive map - specifically an svg

And the svg:

http://teamworksdesign.com/clients/neurosign/wp-content/themes/default/images/usa_map.svg

Obviously the png is easy enough to enlarge in PS but how can I enlarge the svg whilst keeping all it's coordinates in place?

UPDATE: Changing this line below on the svg doesn't affect the size of the svg开发者_开发知识库, the hover states just stay the same original size:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 432 275">


SVG is a vector-format. So if you just change the width and height-attributes on the root-element to 100% each and leave the viewport on the original pixel-values, it will fill the available space while every coordinate is re-calculated by the parser. The sized of the displayed picture now depends on where it is embedded.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 432 275">

Also, instead using JavaScript for hover-effects, I would use CSS (e.g. polygon:hover { fill: #32cd32; }).


Change the width and height in pixels, but keep the viewBox as it is. For example, to double to size:

<svg width="832px" height="550px" viewBox="0 0 432 275" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜