RaphaelJS 条带化成 SVG

Posted 2023-03-06

【中文标题】RaphaelJS 条带化成 SVG

【英文标题】：RaphaelJS stripes into a SVG

【发布时间】：2014-07-29 07:53:30

【问题描述】：

我正在使用 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);

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

但是我意识到 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);

谢谢，

【问题讨论】：

认为将其分解为突出特定问题的 jsfiddle 可能更有用。

【参考方案1】：

RaphaelJS 的动画渐变似乎是 not be supported。您必须使用 0 ms 调用 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 使用此函数来实现您想要的条纹和行为。