Raphael.js путь / линия с градиентом?

Question

возможно ли обводить путь в Рафаэле градиентом? * Например, 1001 *

http://jsfiddle.net/L92Ch/.

Я хочу, чтобы эта линия имела градиент отодин цвет к другому.В документации SVG и Raphael я ничего не могу найти по этому поводу.

jsplumb.org / jquery / anchorDemo.html это пример из jsplumb.Линии имеют градиент.jslumb использовать тег canvas.(извините, как новый пользователь, мне разрешено публиковать только одну ссылку)

Моя другая идея - использовать прямоугольник с небольшой высотой для имитации линии, но у меня также есть линии Безье.

С наилучшими пожеланиями

Freakezoid

Answer 1

Из коробки, Рафаэль не может этого сделать, тебе нужен плагин. Вот jsfiddle для простого, который я создал: http://jsfiddle.net/tcouc/qncEC/

Функция defineLinearGradient просто добавляет линейные градиенты svg в раздел defs, а функция strokeLinearGradient добавляет атрибут обводки для ссылки на идентификатор создаваемого вами linearGradient.

Я сделал это так, чтобы вы могли ссылаться на градиент в более чем одной форме.

Обратите внимание, что вы не можете просто установить штрих, используя функцию attr элемента Raphael - это не сработает - внутренне функция attr пытается преобразовать значение, заданное в аргументе stroke, в выражение значения rgb и завершается неудачей, поэтому моя функция strokeLinearGradient ,

Надеюсь, что поможет

Answer 2

SVG поддерживает градиенты.

Я недавно выпустил версию 1.3.1 jsPlumb, в которой поддерживается SVG. В приведенной вами демонстрации есть SVG-градиенты:

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

(чтобы перейти в режим рендеринга SVG, нажмите ссылку 'SVG')

В спецификации SVG есть что сказать о градиентах:

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