Raphael.js路径/渐变线？

Question

是否可以使用渐变来描绘raphael中的路径？

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

我希望这条线具有从一种颜色到另一种颜色的渐变。 在SVG和Raphael文档中，我无法找到任何相关内容。

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

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

最好的问候

Freakezoid

Answer 1

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

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

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

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

希望有所帮助

Answer 2

SVG支持渐变。

我最近发布了jsPlumb的1.3.1版本，其中支持SVG。您引用的演示中包含SVG渐变：

http://jsplumb.org/jquery/anchorDemo.html#

（您需要点击“SVG”链接才能进入SVG渲染模式）

SVG规范对渐变有一点说法：

http://www.w3.org/TR/SVG/pservers.html