RaphaelJS stripes into a SVG

Question

I am making a dynamic map, with AngularJS and RaphaelJS.

My whole SVG object is created into a directive ; and I would like to give colors to each area of the map.

For some regions, I would like to do stripes ; and I have been looking for long how to do, it looks like :

background-color: orange;
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,1) 5px, rgba(0,0,0,1) 10px);

my pattern

I would also make this pattern change on hover (black and red stripes), and to come back to black and orange stripes on mouse out.

However I realized that there is no equivalent of "repeating-linear-gradient" in RaphaelJS (right ?) and I don't really know how to do.

I am at least trying to do it with gradients, but it's not working (the result with on mouse over is not the one expected. Why ?)

here is my code into the directive :

var paper = new Raphael(element[0], 600, 600);

var attr = {
    fill: "#f5f5f5",
    stroke: "#222",
    "stroke-width": 1,
    "stroke-linejoin": "round"
};

var fr = {};
fr.area1 = paper.path("...").attr(attr).attr({href: "#"});
fr.area1 = paper.path("...").attr(attr).attr({href: "#"});
fr.area1 = paper.path("...").attr(attr).attr({href: "#"});

[...]

var state = area 3;

attr = {      
 fill: '45-' + color1 + '-' + color2,
 stroke: "#222"};

fr[state].attr(attr);


            (function(state) {

                var area = fr[state];

                area[0].style.cursor = "pointer";
                area[0].onmouseover = function() {

                    area.animate({
                        fill: '45-' + color3 + '-' + color2,
                        stroke: "#222"
                    }, 10);
                    area.toFront();
                };

                area[0].onmouseout = function() {
                    area.animate({
                        fill: '45-' + color1 + '-' + color2,
                        stroke: "#222"
                    }, 300);
                    area.toFront();
                };
            })(state);

Thank you,

Think it could be more useful to break it down onto a jsfiddle highlighting the particular problem. — Ian, Jun 09 '14 at 08:27

score 1 · Accepted Answer · edited May 23 '17 at 11:43

Animated gradients seem to not be supported by RaphaelJS. You have to call animate with 0 ms to avoid having a black flash effect during the animation. Here is a fiddle of your working example.

To achive the stripped effect you can use this function (modified version of this answer):

function gradientString(colors, step) {
    var gradient = '45-' + colors[0],
        stripe = false,
        len = colors.length,
        i;

    for (i = 0; i < 100/step; i += 1) {
        gradient += '-' + colors[i % len] + ':' + i * step + '-' + colors[(i+1) % len] + ':' + i * step;
    }

    return gradient;
}

Here is a fiddle using this function to achive the stripes and behavior you want.

RaphaelJS stripes into a SVG

1 Answers1