javascript - RaphaelJS 条纹成 SVG

Question

我正在使用 AngularJS 和 RaphaelJS 制作动态 map 。

我的整个 SVG 对象被创建到一个指令中；我想为 map 的每个区域赋予颜色。

对于某些地区，我想做条纹；我一直在寻找如何做，看起来像:

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

我还会在悬停时更改此图案(黑色和红色条纹)，并在鼠标移开时恢复为黑色和橙色条纹。

但是我意识到在 RaphaelJS 中没有等效的“重复线性渐变”(对吧？)而且我真的不知道该怎么做。

我至少尝试用渐变来实现它，但它不起作用(鼠标悬停的结果不是预期的结果。为什么？)

这是我在指令中的代码:

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);

谢谢，

Answer 1

动画渐变似乎not be supported由 RaphaelJS 提供。您必须用 0 毫秒调用 animate 以避免在动画期间出现黑色闪光效果。这是一个 fiddle您的工作示例。

要实现剥离效果，您可以使用此函数(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;
}

这是一个fiddle使用这个函数来实现你想要的条纹和行为。