I am currently creating an interactive map using AngularJS and RaphaelJS.
The entire SVG object is generated within a directive, and my goal is to assign different colors to each area on the map.
Specifically, I want some regions to have a striped pattern. After extensive research, I found a potential solution:
background-color: orange;
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,1) 5px, rgba(0,0,0,1) 10px);
Additionally, I aim to switch this pattern to black and red stripes upon hover, reverting back to black and orange stripes when the mouse moves away.
Unfortunately, I discovered that there isn't an equivalent of "repeating-linear-gradient" in RaphaelJS (correct me if I'm wrong), leaving me unsure about how to proceed.
I attempted to achieve similar effects with gradients, but ran into issues (the hover result didn't meet expectations. Any ideas why?)
Below is a snippet of the code within 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.area2 = paper.path("...").attr(attr).attr({href: "#"});
fr.area3 = paper.path("...").attr(attr).attr({href: "#"});
[...]
var state = 'area3';
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,