SVG điền màu trong suốt / alpha?

416

Có thể đặt mức độ trong suốt hoặc mức alpha trên màu tô SVG không?

Tôi đã thử thêm hai giá trị vào thẻ điền (thay đổi từ fill="#044B94"thành fill="#044B9466"), nhưng điều này không hoạt động.

— Kính cường lực
nguồn

Đối với bất kỳ ai quan tâm, để nhận được các nhấp chuột trên một vùng trống: xem SVG Phát hiện các sự kiện Onclick trên fill fill: none ' - tức là khả năng sử dụng fill="none"với pointer-events="visible".

— Fabien Snauwaert

645

Bạn sử dụng một thuộc tính gây nghiện; fill-opacity: Thuộc tính này có một số thập phân giữa 0,0 và 1,0, bao gồm; trong đó 0,0 là hoàn toàn trong suốt.

Ví dụ:

<rect ... fill="#044B94" fill-opacity="0.4"/>

Ngoài ra, bạn có những điều sau đây:

stroke-opacity thuộc tính cho đột quỵ
opacity cho toàn bộ đối tượng

— Williham Totland
nguồn

3

MDN cung cấp một cái nhìn tổng quan về các thuộc tính này và các thuộc tính liên quan khác trong Hướng dẫn SVG của họ, developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/ Lỗi

— t-mart

4

bạn cũng có thể đặt những thứ này trong thuộc tính style: <orth style = "fill: # 044B94; fill-opacity: 0.4;" />

— PeterVermont

Trong phần trên, "fill-opacity" và "Stro-opacity" nên được thay thế bằng "fill_opacity" và "Stro_opacity" (nghĩa là thay thế dấu gạch ngang bằng dấu gạch dưới).

— mermaldad

1

@mermaldad Điều đó không chính xác; xem đặc điểm kỹ thuật . Trong một số ngôn ngữ không cho phép tên chứa dấu gạch nối, các thư viện để làm việc với SVG sử dụng các tên như fill_opacity, nhưng trong SVG và CSS, thì đó là fill-opacity.

— Williham Totland

@WillihamTotland, cảm ơn vì đã sửa. Tôi đã nhảy thẳng vào "làm thế nào để tôi thực hiện điều này bằng cách sử dụng svgwrite trong Python". Ở đó bạn cần phải thay thế các dấu gạch ngang bằng dấu gạch dưới.

— mermaldad

78

Là một giải pháp chưa được chuẩn hóa hoàn toàn (mặc dù phù hợp với cú pháp màu trong CSS3), bạn có thể sử dụng, vd fill="rgba(124,240,10,0.5)". Hoạt động tốt trong Firefox, Opera, Chrome.

Đây là một ví dụ .

— Erik Dahlström
nguồn

3

Nhìn vào w3.org/TR/SVG/painting.html#FillProperIES (cuộn xuống một chút để điền vào opacity); Trông tôi khá chuẩn.

— Williham Totland

10

@williham: có độ mờ lấp đầy trong khuyến nghị của SVG và không có vấn đề gì với việc sử dụng nó. Cú pháp CSS3 có màu CSS3, cách một bước để trở thành đề xuất w3c. SVG 1.1 không tham chiếu Màu CSS3 vì nó không có sẵn tại thời điểm đó, phiên bản tương lai của SVG có thể sẽ có.

— Erik Dahlström

7

Chỉ muốn đề cập, một nơi mà điều này dường như không hoạt động là trong Inkscape

— George Mauer

2

Tôi đã sử dụng giải pháp này trên Highcharts và nó đã hoạt động. Nó chuyển rgbađến rgbvà tự động thêm vào các fill-opacitythuộc tính để nó. Tôi không chắc đây có phải là cách nó hoạt động trong các SVG bình thường không, nhưng đó là cách nó hoạt động ở đó. Dù bằng cách nào, cảm ơn.

— Hanna

3

Tôi có thể làm rõ một số trình duyệt thực sự hỗ trợ rgba trong các svSS nội tuyến không?

— redanimalwar

6

fill="#044B9466"

Đây là màu RGBA theo ký hiệu hex bên trong SVG, được xác định bằng các giá trị hex. Điều này là hợp lệ, nhưng không phải tất cả các chương trình có thể hiển thị đúng ...

Bạn có thể tìm thấy sự hỗ trợ của trình duyệt cho cú pháp này tại đây: https://caniuse.com/#feat=css-rrggbbaa

Kể từ tháng 8 năm 2017: Màu lấp đầy RGBA sẽ hiển thị đúng trên Mozilla Firefox (54), Apple Safari (10.1) và "Xem nhanh" của Mac OS X Finder. Tuy nhiên, Google Chrome không hỗ trợ cú pháp này cho đến khi phiên bản 62 (trước đây được hỗ trợ từ phiên bản 54 với cờ Tính năng nền tảng thử nghiệm được bật).

— Mr-IDE
nguồn

Bạn có biết nếu họ thay đổi một cái gì đó gần đây? Tôi đã có một ứng dụng chrome hoạt động sử dụng fill: rgb (...) và bây giờ nó đã bị hỏng hoàn toàn. Tôi đánh giá cao sự giúp đỡ của bạn!

— Mariodiar

Thư viện Qt SVG (Qt 5.9.3) cũng không thể xử lý các màu RGBA cho đến nay dưới dạng hex "# 00000000" cũng như "rgba".

— bkausbk

2

Để làm cho một điền hoàn toàn minh bạch, fill="transparent"dường như làm việc trong các trình duyệt hiện đại. Nhưng nó không hoạt động trong Microsoft Word (cho Mac), tôi phải sử dụng fill-opacity="0".

— Brett Donald
nguồn

Đối với trình soạn thảo đồ họa vector Inkscape 0.92.4.0 , fill="none"hoạt động, nhưng fill="transparent"không.

— samm

1

Sử dụng thuộc tính fill-opacitytrong phần tử SVG của bạn.

Giá trị mặc định là 1, tối thiểu là 0, trong bước sử dụng giá trị thập phân EX: 0,5 = 50% alpha. Lưu ý: Cần xác địnhfill màu để áp dụng fill-opacity.

Xem ví dụ của tôi .

Tài liệu tham khảo .

— Ăn kiêng Darlan
nguồn