CODEWITHSUNDEEP
javascriptsvgraphael
Max
Max

Reputation: 91

Use Raphael to manipulate SVG

Is it possible to use Raphael to manipulate an embedded SVG image? I used Raphael in the past to draw shapes, but haven't actually seen it being used to manipulate an existing SVG image. If not, is there anything else that allows me to easily change colours, add events, etc. to polygons of an embedded SVG image?

Upvotes: 9

Views: 2016

Answers (2)

myw01
myw01

Reputation: 96

From my experience reading the Raphael.js source, I have to agree with previous posts. The only way I can think of to replace or modify the SVG is by replacing/modifying the markup/DOM itself.

All I want to add in my answer is a short, general explanation of why this is so. Raphael is designed as an SVG/VML generator. That is, Raphael makes JavaScript objects and appends their corresponding SVG/VML markup to the DOM as they are made. The objects have lots of additional properties that make them work within the Raphael framework.

It may be possible to write a plugin that can construct a Raphael object around an SVG element by reading its properties, but, I suspect that such an object may not have all the information it needs to coexist with the other Raphael objects. Certainly, no such parsing/reconstruction functionality currently exists.

Upvotes: 4

PhiLho
PhiLho

Reputation: 41142

Funny, yesterday I found the glitchsvgicons page doing that.
Although in a very primitive way, just using a regex replace of parts.
It can be hint, though: apparently you can use good old search/replace of text parts on SVG icons. But it is more prone to issues than using a real Dom tree...

Upvotes: 0

Related Questions