Problems with sizing SVG in Raphael

Question

I am trying to make this svg from Europe using raphael. For each path in svg I analyzed it and will do: r.path([countrypath]) . It works, but the problem is that it is great. For example, some of the paths look like M 11689.234, 6005.2561... It doesn’t even come close to installing on a M 11689.234, 6005.2561... canvas. How to resize this image? Raphael's scale / translation doesn't seem to work, or I don't know how to use it. I noticed that in SVG every path has transform="translate(5.875e-4,7.538462e-5)" Do I need to somehow change the viewBox? Or in any way change the path of the SVG before it touches Raphael?

Answer 1

you can use scale (Xtimes, Ytimes, centreX, centreY)

where Xtimes, Ytimes is the decrease in the proportion; if you choose 0.2, the images will be reduced to 1/5

and

centreX, centreY - relative coordinates where you must select 0,0 so that all svg paths / parts are reduced uniformly and relatively

if you select the scale (0,2,0,2,0,0), your image will be correctly reduced to 1/5

Answer 2

Yesterday I put together a fairly large SVG of the world and fed it through the SVGTOHTML converter. You will find the tool and related information @ http://www.irunmywebsite.com/raphael/svgsource.php

I installed the entire resource download for Raphael @ http://www.irunmywebsite.com/raphael/raphaelsource.php Among them you will find a world map wrapped in a pluto scale provided by Zeven!

20 minutes of exercise delivered it ... http://www.irunmywebsite.com/raphael/colourmap2.php

Hope this helps 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 details, but simplifying them will significantly reduce the path length.

Answer 3

You have two options for using what I did, use .transform (the "conversion string") to scale the paths, the conversion string can be sww, hh, xx, yy, where ww and hh are as much as you want to scale the path .

 .transform("s0.25,0.25,0,0"); 

You can find EXAMPLE HERE or jsfiddle HERE. Or use

 paper.scaleAll(n); 

where n is the amount by which you want to scale all the paper. First create a path on the page and then draw a paper object, maybe half

 paper.scaleAll(0.5); 

You can find the library and examples for the Scale.Raphaeljs library at the following link: Raphael large-scale library

Answer 4

Translating such a small amount seems a bit wasteful, it's ~ 0 anyway, I doubt you will see much of the difference if you separate the conversion attributes that look like this.

Yes, changing the viewBox may lead to what you want in all viewers that support SVG, but raphael itself does not support viewBox (you have to provide some VML reserve yourself).

Either pre-process the path data according to your specific use (probably a good idea anyway, it always helps to save the file size, Wikipedia maps are usually quite large) or use the raphael scale function to scale the path to the desired size .

Update : Raphaël v2.0 and later support viewBox (via the setViewBox method).

Answer 5

You can use the Raphael attribute 'translation', which takes x, y delta. those.:

 r.path([countryPath]).attr({translation:'-11689, -6005'}); 

To make it more reusable for multiple paths, you can parse the x and y values ​​from M in your svg path. When I did this, it turned out that I didn’t want my path to be exactly 0,0, since he also sent it over the canvas - some adjustment may be required depending on the height and width of your element.