Đối tượng SVG có thể có màu tô và mẫu tô đầy không?

Question

Tôi đang làm việc với SVG bằng cách sử dụng thư viện Raphael. Tôi có thể áp dụng một màu fill đến một đối tượng như vậy:

circle.attr({fill: "#ff0000"}); 

Và điều này cũng làm việc (mặc dù tài liệu Raphael không đề cập đến nó):

circle.attr({fill: "url(pattern.png)"}); 

tôi có thể sử dụng PNG trong suốt như mô hình lấp đầy và tính minh bạch hoạt động như mong đợi. Đối tượng svg là hoàn toàn trong suốt, nơi hình ảnh mẫu điền là trong suốt. Nhưng những gì tôi muốn làm là chỉ định cả một hình ảnh mẫu điền và một màu tô, để màu sắc sẽ hiển thị thông qua nơi hình ảnh mẫu trong suốt - tương tự như thuộc tính 'nền' bằng cách sử dụng CSS chẳng hạn. Điều này có thể thực hiện với SVG không?

Answer 1

Bạn có thể xác định mẫu có hình chữ nhật có tô màu và hình ảnh là png của bạn trên đầu trang đó. Sau đó, sử dụng mẫu như điền cho vòng tròn (hoặc bất kỳ yếu tố nào bạn muốn).

Điều này có nghĩa là bước ra ngoài Raphaël hoặc mở rộng để thực hiện những gì bạn muốn. Lưu ý rằng những gì ({fill: "url(pattern.png)"}) thực hiện là tạo phần tử mẫu và thêm phần tử hình ảnh trỏ đến url đã cho. Bạn có thể hack Raphaël để cho phép bạn vượt qua một màu quá, và sau đó bạn đối phó với điều đó trong mã tạo ra mẫu bằng cách tạo ra một rect của các kích thước giống như hình ảnh với màu tô nhất định.

Tôi nên nói rằng nếu bạn muốn nó hoạt động với IE < 9 thì có thể bạn cũng cần triển khai nó trong VML.

Các tùy chọn khác bao gồm vẽ hai hình dạng, một hình có tô màu và hình kia có tô màu hình ảnh raster. Tuy nhiên, khác là làm cho png bao gồm màu nền để nó không minh bạch.