(RaphaelJS) - How to Fill the inside of a path?

svg raphael vector-graphics
Farzan picture Farzan · Dec 1, 2012 · Viewed 7.1k times · Source

I have a path for the RaphaelJS library, I can't seem to get the fill to change its color.

var mypage = ScaleRaphael('mainContainer', 1000, 1000);
 mypage.setStart();
mypath.path('M794.33,21.5l152.3-0.76L946,21.5v-0.22l1.39,0.01l-1.17,206.61l-0.04,0.3l-0.15,0.27l-0.04,0.07l-0.18,0.35l-0.34,0.2 L786.4,321.59l-159.22,92.27l-2.12,1.18l-0.07-2.36v-1v-0.28l0.18-0.26l42.1-97.5l42.26-97.43l21.13-48.71l21.21-48.68 L794.33,21.5z M794.33,21.5l-41.46,97.76l-20.76,48.87l-20.84,48.83l-41.68,97.67l-41.78,97.59l0.18-0.54v1l-2.11-1.18 l159.08-92.46l159.23-92.21l-0.52,0.54l0.03-0.07l-0.14,0.57l2.04-206.6l1.39,0.01v0.22l0.13,0.77l-0.69,0L794.33,21.5z')
    .attr({"type":"path","stroke":"none","fill":"blue"});

The path is created correctly but the fill attribute only makes the stroke blue and not the filling, what am i doing wrong?

Answer

methodofaction picture methodofaction · Dec 1, 2012

Your path is shaped like a stroke, to make it fill modify the path by removing everything starting from the second M:

var stage = Raphael('stage',1000, 1000);
var path = stage.path('M794.33,21.5l152.3-0.76L946,21.5v-0.22l1.39,0.01l-1.17,206.61l-0.04,0.3l-0.15,0.27l-0.04,0.07l-0.18,0.35l-0.34,0.2 L786.4,321.59l-159.22,92.27l-2.12,1.18l-0.07-2.36v-1v-0.28l0.18-0.26l42.1-97.5l42.26-97.43l21.13-48.71l21.21-48.68 L794.33,21.5z')
    .attr({"type":"path","stroke":"none","fill":"blue"});​

http://jsfiddle.net/YzMCG/

Related questions

How to get the outline of a stroke?

I want to convert a stroked path to a filled object. (Programmatically, in JavaScript.) The line is just a simple curved line, a sequence of coordinates. I can render this line as a path, and give it a stroke of …

Read More
How to access SVG elements with Javascript

I'm messing around with SVG and I was hoping I could create SVG files in Illustrator and access elements with Javascript. Here's the SVG file Illustrator kicks out (It also seems to add a load of junk to the beginning …

Read More
jQuery SVG vs. Raphael

I'm working on an interactive interface using SVG and JavaScript/jQuery, and I'm trying to decide between Raphael and jQuery SVG. I'd like to know What the trade-offs are between the two Where the development momentum seems to be. I …

Read More