I don't understand the way Raphael or SVG works.
I want to create a map of germany, using SVG and Raphael. I have the paths of each administrative area and creation works, but the result got an own size.
I mean, if I tell Raphael being 300x300px and add some paths the objects generated by paths are larger.
Code:
var paper = new Raphael(document.getElementById('svnInnerGroup'), 300, 300);
paper.path('...');
Result: I get a 300x300 pixel SVG graphic (this is good), with the upper left corner of germany (this is not good). I expect that the map of germany would fit to the given size.
Maybe I don't understand the concept, I hope you can help me.
Thanks!
Okay, I have found my mistake! Such SVG graphics always need a "viewbox", which defines the beginning and ending of the document. When I copy any paths from any file, I need to copy and use the viewbox too.
This is how you can set the viewbox with raphael:
paper.canvas.setAttribute("viewBox", "0 0 591 800");
Thanks!
Related
I want to fill a SVG path completely with a jpg or png image. I found this answer very useful ( Crop to fit an svg pattern ) but this doesn't seem to work for more complex paths. It does for rect and circles :-). When applying this code to a path it shows the jpg images upside down and mirrored. In several browsers.
This behaviour can be seen at http://www.paulvanroekel.nl/specials/colourmyvm/test.html
Any ideas?
Solved by removing unnessecary scale and transform code and by changing the coordinates for "M" (absolute) to "m" relative. That did the trick. Basically I edited the svg file again in Inkscape and saved it als normal SVG.
As described in another post, I am trying to recreate an SVG from vector graphics commands in a PDF and I am facing some difficulty in the part where I need to intersect a set of clip paths. For instance, the raw SVG has a few clip path elements line #16 which need to be intersected and applied on the rectangle fill (line #17) to obtain what looks like this: .
I am not clear about the correct and the best way to achieve intersection of multiple clip paths in an SVG. I wasn't able to find much information about this on the web except this one, going by which I came up with this SVG where I introduce a sequence of additional clipPath elements which try to intersect the current intersection with the next original clipPath to be added to the intersection set. This approach seems rather inelegant to me. Besides, that SVG doesn't seem to work on some versions of Firefox (ESR 17.x) though it renders the expected result on Firefox 5, Chrome and IE. Is there something wrong with the SVG? Or even if it is correct, is there a simpler/better way to achieve the intersection?
The way you've done it seens reasonable. There's a w3c example in the testsuite.
i am working on SVG, problem i am facing is that i want to read the path and after reading it i want to draw the circles through tag used in svg, on that path, kindly help me out any help will be awesome...Thanks in Advance :)
The information you have provided still does not make sense to me. Here's a guess at what you might be looking for.
If you have a <path> element and you want to place circles along the path, you can use the getPointAtLength() method to find the location at an arbitrary distance along the path.
Then you can create <circle> elements (or <use> elements that reference a circle) and place them at this location.
Here is a demo that uses this technique (and also happens to create a <polygon> of the result):
http://phrogz.net/svg/convert_path_to_polygon.xhtml
In inkscape the coordinate system is bottom/top corner (meaning, 0,0 is left bottom corner). This is the same case with Adobe Illustrator. But, when I try to use this path string in raphael it use top/bottom (meaning, 0,0 is top/left corner) approach. How to convert this path string according to browser's coordinates or raphael's coordinates?
I had this problem before and the easiest way that I found to solve it is to flip the image before getting the path string.
I have been experiencing a similar issue trying to make a map I created in Inkscape. All of my countries were off the charts, literally!
I just copied my svg file into Ready Set Raphael and it worked like a charm.
I have a path I've created in Illustrator and saved as an SVG.
Now I want to programmatically place it at different sizes and coordinates on a large canvas.
Say I've got this image:
(source: omgtldr.com)
How would I reproduce that same image in different places and sizes in one SVG file, like this:
(source: omgtldr.com)
for example, one version shrunk by 20% at coordinates x,y; another enlarged by 30% at coordinates a,b and so on.
Please assume I'm going to be OK with the programming part, I'm comfortable working with XML files. It's the SVG parts I don't understand.
You need the transform attribute. You can move your paths with translate and resize them with scale.
Better to use the <use> element (transformed) than to copy your path for each instance.