2011-01-23 40 views
7

là nó có thể đột quỵ một con đường trong raphael với một gradient?Đường dẫn/đường dẫn Raphael.js có độ dốc?

http://jsfiddle.net/L92Ch/ là ví dụ.

Tôi muốn dòng này có độ dốc từ màu này sang màu khác. Trong tài liệu SVG và Raphael tôi không thể tìm thấy bất cứ điều gì về điều đó.

jsplumb.org/jquery/anchorDemo.html đây là ví dụ từ jsplumb. Các dòng có độ dốc. jslumb sử dụng thẻ canvas. (xin lỗi với tư cách là một người dùng mới, tôi chỉ được phép đăng một liên kết)

Ý tưởng khác của tôi là sử dụng chữ khắc với chiều cao nhỏ để bắt chước dòng, nhưng tôi cũng có dòng Bezier.

Trân trọng

Freakezoid

+0

Bạn có thể thử tạo cùng một hình nhiều lần với kích thước khác nhau, không phải rất thanh lịch mặc dù ... đây là kết thúc đồ họa vector và pixel canvas win. – Bakaburg

Trả lời

12

Ra khỏi hộp, Raphael không thể làm điều đó, bạn cần một plugin. Đây là jsfiddle cho cái đơn giản mà tôi đã tạo: http://jsfiddle.net/tcouc/qncEC/

Hàm defineLinearGradient chỉ thêm gradient tuyến tính svg vào phần defs, và hàm strokeLinearGradient thêm thuộc tính stroke để tham chiếu id của linearGradient mà bạn tạo.

Tôi đã làm theo cách này để bạn có thể tham khảo độ dốc trong nhiều hình dạng.

Lưu ý rằng bạn không thể đặt đột quỵ bằng chức năng attr của phần tử raphael - nó sẽ không hoạt động - bên trong hàm attr cố gắng chuyển đổi giá trị được đặt trong đối số đột quỵ thành biểu thức giá trị rgb và không thành công, do đó strokeLinearGradient của tôi chức năng.

Hy vọng rằng sẽ giúp

+0

Yay! Trông rất tuyệt ! – Bathz

0

SVG hỗ trợ gradient.

Gần đây tôi đã phát hành phiên bản 1.3.1 của jsPlumb, trong đó SVG được hỗ trợ. Bản demo bạn trích dẫn có gradient SVG trong nó:

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

(bạn cần phải nhấp vào liên kết 'SVG' để kick nó vào SVG làm cho chế độ)

Các spec SVG có một chút công bằng mà nói về gradient:

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

Các vấn đề liên quan