CSS 3 gradients để tạo kiểu cho các phần tử SVG

Question

Có thể sử dụng các gradient CSS3 để tạo kiểu dáng thuộc tính không?

Tôi biết rằng SVG cung cấp các gradient của riêng họ. Nhưng giải pháp lý tưởng cho tôi sẽ là:

.button{ 
    fill:#960000; 
    fill: -webkit-gradient,linear,left bottom,left top, 
      color-stop(0.45, #37304C),color-stop(0.73, #534D6B)); 
    fill: -moz-linear-gradient(center bottom,#37304C 45%,#534D6B 73%); 
    ... 
} 

Khi tôi cố gắng sử dụng gradient SVG, tôi bị kẹt khi cố gắng trích xuất thuộc tính kiểu thành biểu định kiểu ngoài. Dường như điền: url (#linearGradientXYZ) không hoạt động khi gradient được xác định trong tệp .svg.

Answer 1

Không thể sử dụng CSS3 gradient cho thuộc tính điền. Tin tốt là mặc dù nó đang được thảo luận bởi nhóm làm việc CSS và SVG, và SVG.next sẽ phụ thuộc vào CSS3 Image Values ​​(định nghĩa cú pháp gradient CSS). Xem http://www.w3.org/2011/07/29-svg-minutes.html#item08.

Lưu ý rằng url cơ sở cho fill:url(...) theo mặc định là tệp chứa quy tắc này. Vì vậy, nếu bạn muốn di chuyển fill:url(#linearGradientXYZ) sang biểu định kiểu bên ngoài, hãy nhớ thêm đường dẫn đầy đủ vào tệp chứa định nghĩa gradient đó, ví dụ: fill:url(../images/gradients.svg#linearGradientXYZ).