Raphael.js路径/渐变线？ [英] Raphael.js path/line with gradient?

问题描述

是否可以使用渐变在raphael中描边路径？

is it possible to stroke a path in raphael with a gradient?

http://jsfiddle.net/L92Ch/ 就是一个例子。

http://jsfiddle.net/L92Ch/ is a example.

我希望这一行有一个渐变从一种颜色到另一种颜色。
在SVG和Raphael文档中我找不到任何相关内容。

I want this line to have a gradient from one color to another. In the SVG and Raphael documentation i cant find anything about that.

jsplumb.org/jquery/anchorDemo.html这是jsplumb的一个例子。线条有渐变。 jslumb使用canvas标签。 （抱歉作为一个新用户，我只允许发布一个链接）

jsplumb.org/jquery/anchorDemo.html this is a example from jsplumb. The lines have a gradient. jslumb use the canvas tag. (sorry as a new user i am only allowed to post one link)

我的另一个想法是使用一个小高度的矩形模仿线，但我有贝塞尔线也是。

My other idea is to use a rect with a small height to imitate the line, but i have Bezier lines too.

最好的问候

Freakezoid

Freakezoid

推荐答案

开箱即用，Raphael无法做到，你需要一个插件。这是我创建的简单的jsfiddle： http://jsfiddle.net/tcouc/qncEC/

Out of the box, Raphael can't do it, you'd need a plugin. Here's the jsfiddle for the simple one that I created: http://jsfiddle.net/tcouc/qncEC/

defineLinearGradient函数只是将svg线性渐变添加到defs部分，strokeLinearGradient函数添加stroke属性以引用您创建的linearGradient的id。

The defineLinearGradient function simply adds the svg linear gradients to the defs section, and the strokeLinearGradient function adds the stroke attribute to reference the id of the linearGradient that you create.

我是这样做的，这样你就可以在多个形状中引用渐变。

I did it this way so that you can reference the gradient in more than one shape.

请注意，您不能使用raphael元素的attr函数设置笔划 - 它不会工作 - attr函数在内部尝试转换stroke参数中设置的值到一个rgb值表达式并失败，因此我的strokeLinearGradient函数。

Note that you cant just set the stroke using the attr function of the raphael element - it wont work - internally the attr function attempts to convert the value set in the stroke argument to an rgb value expression and fails, hence my strokeLinearGradient function.

希望有帮助

这篇关于Raphael.js路径/渐变线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！