Skip to content
This repository has been archived by the owner on Apr 8, 2020. It is now read-only.

Raphael Markers for Arrow tips Not exported #28

Open
nik10-mah opened this issue Jun 14, 2013 · 5 comments
Open

Raphael Markers for Arrow tips Not exported #28

nik10-mah opened this issue Jun 14, 2013 · 5 comments

Comments

@nik10-mah
Copy link

I am creating connections with arrow heads between the rectangles using graffle(http://raphaeljs.com/graffle.html) but when i try to export the svg the connections between the rectangles do appear but the arrow-heads doesn't .
I have created a fiddle for your ref:- http://jsfiddle.net/nHEsE/10/
Please let me know if you want more clarifications.

Thanks

@nik10-mah
Copy link
Author

Just want to add some info, The export doesn't includes attributes marker-end-url in the path elements and this would also accompany the raphael inbuilt markers defined in raphael defs tag.
Hope this helps if you are not aware of it

@nik10-mah
Copy link
Author

I think i have found the issue.
It seems like the issue is with the defs tag(that contains the marker ids) of raphael are not included in exported svg and also marker-end-url attribute is not present in the path elements because of which arrow-heads are not showing.
In path elements of rapahel, while export, instead of marker id another attribute is added which is "arrow-end": "classic-midium-midium". So when i added the defs tag of raphael into my generated svg and replace the arrow-end attribute with the marker-end-url attribute by giving the required value the arrow heads appeared.
But now the issue is with the positioning of arrow heads. In the exported svg the x and y coordinates of horizontal and vertical arrowheads is slightly more which leads to intersection of arrows with the object(rectangles in my case) which doesn't look good.

Also adding defs tag statically and replacing the arrow-head attribute with marker-end-url by manipulating the svg string doesn't looks like a good solution.Is there any other way of doing it.?

Any help in this regard will be appreciated. I really need this.

Thanks

@AliasIO
Copy link
Owner

AliasIO commented Jun 28, 2013

Sorry for not responding. I can't really help you without investigating the issue, to be honest I don't know much about the subject either. Other project take priority at the moment, I can't say for sure when I have some time to look into this. Please do let me know if you make some progress in the mean time.

@oblakeerickson
Copy link

I understand you can't actively work on this issue right now, but just wanted to let you know that I'm also having the same issue where the arrow heads aren't being converted to svg.

@oblakeerickson
Copy link

Not sure if this will help anyone or not, but I was able to get around not having arrow heads by drawing a line with a triangle on it:

var arrow = R.path('M 12.5 25 L 12.5 100 M 12.5 0 L 25 25 L 0 25 Z');
arrow.attr( { fill: 'black', stroke: 'black', 'stroke-width': '12' } );

This exports to SVG correctly. Here is a screen shot after I rendered the svg to png:

localhost_basicsafe_app_views_shared_image_edit_php_name_tmp_237_299_jpg

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants