Raphael.js路径/线条如何使用渐变?

7

能否在raphael中使用渐变来描边路径?

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

我希望这条线有一个从一种颜色到另一种颜色的渐变。在SVG和Raphael文档中,我找不到任何相关信息。

jsplumb.org/jquery/anchorDemo.html 这是jsplumb的一个示例。这些线条有一个渐变。jslumb使用canvas标签。(很抱歉,作为新用户,我只能发布一个链接)

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

最好的问候

Freakezoid


你可以尝试用不同大小的笔画多次创建相同的形状,虽然不是很优雅...这就是矢量图形的局限性,像素画布则胜出。 - Bakaburg
2个回答

12

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

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

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

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

希望能对您有所帮助。


0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接