I am trying to draw this svg of europe using raphael. For each path in the svg, I've parsed it and do: r.path([countrypath])
. This works, but the problem is that it is gigantic. For example, some of the paths look like M 11689.234, 6005.2561...
It isn't even coming close to fitting on a 500x500 canvas. How do I resize this? Raphael's scale/translate don't seem to work, or I don't know how to use it. I noticed in the SVG each path has transform="translate(5.875e-4,7.538462e-5)"
Do I need to somehow change the viewBox? Or change the svg path's somehow before it touches Raphael?
you can use scale(Xtimes,Ytimes,centreX,centreY)
where Xtimes,Ytimes are the proportion reduction if you select 0.2 the images would be reduced to 1/5th
and
centreX, centreY are relative coordinates where you should select 0,0 so that all paths/parts of svg are scaled down uniformly and relatively
if you select scale(0.2,0.2,0,0) your image would be properly reduced to 1/5th
I actual picked out quite a large SVG of the world yesterday and fed it through the SVGTOHTML converter. You will find the tool and associated info @ http://www.irunmywebsite.com/raphael/svgsource.php
I set up a whole load of resources for Raphael @ http://www.irunmywebsite.com/raphael/raphaelsource.php Amongst these you will find the world map wrapped in the scale pluton provided by Zeven!
The 20minute exercise delivered this... http://www.irunmywebsite.com/raphael/colourmap2.php
Hopefully this will help you or someone with a similar problem in the future. Also note that you can simplify paths in SVG editors as well as scale them before you put them in the SVGTOHTML converter. Quite often maps can be drawn to extreme detail but simplifying them will greatly reduce path length.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With