Question

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

我的整个SVG对象被创建为一个指令;我想给地图的每个区域添加颜色。

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

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

我还会在悬停（黑色和红色条纹）上更改此模式，并在鼠标移出时返回黑色和橙色条纹。

但是我意识到没有相应的＆＃34;重复 - 线性渐变＆＃34;在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

RaphaelJS似乎not be supported动画渐变。您必须使用0 ms调用动画，以避免在动画期间出现黑色闪光效果。以下是您工作示例的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使用此功能来实现您想要的条纹和行为。

RaphaelJS条纹成SVG

1 个答案: