Raphael.js路徑/行與漸變？

Question

是否可以使用漸變撫摸raphael中的路徑？

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

我想這條線有一個從一種顏色到另一種顏色的漸變。 在SVG和Raphael文檔中，我無法找到任何有關這方面的信息。

jsplumb.org/jquery/anchorDemo.html這是jsplumb的一個例子。線條有一個漸變。 jslumb使用畫布標籤。 （抱歉作爲一個新用戶，我只被允許發佈一個鏈接）

我的另一個想法是使用一個小高度的矩形來模仿這條線，但我也有貝塞爾線。

此致

Freakezoid

Answer 1

開箱，拉斐爾不能做到這一點，你需要一個插件。下面是簡單的一個，我創建的jsfiddle：http://jsfiddle.net/tcouc/qncEC/

的defineLinearGradient功能只是增加了SVG的線性漸變到DEFS部分，以及strokeLinearGradient功能將筆畫屬性引用您創建的LinearGradient的ID。

我這樣做，以便您可以引用多個形狀的漸變。

請注意，你不能使用拉斐爾元素的ATTR功能剛剛設置的行程 - 它不會工作 - 內部的ATTR函數試圖在行程參數設定的值轉換爲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