Raphael.js 带有渐变的路径/线？答案

【问题标题】：Raphael.js path/line with gradient?Raphael.js 带有渐变的路径/线？
【发布时间】：2012-07-04 14:33:41
【问题描述】：

是否可以在 raphael 中使用渐变笔画路径？

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

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

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

最好的问候

怪胎

【问题讨论】：

【解决方案1】：

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

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

我这样做是为了让您可以在多个形状中引用渐变。

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

希望有帮助

【讨论】：

【解决方案2】：

SVG 支持渐变。

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

（您需要单击“SVG”链接将其启动为 SVG 渲染模式）

SVG 规范对渐变有很多说法：

【讨论】：