Sử dụng SVG để trộn màu phụ gia (trộn phụ gia)

Question

Xuất phát từ nền thiết kế đồ họa, tôi biết cách gian lận để tạo hiệu ứng additive color. Cùng một giải pháp cơ bản được đề xuất trong another post on here.

Bài đăng ở trên đề cập đến các tệp trong suốt nhưng khái niệm giống nhau. Hiệu ứng cơ bản tôi muốn tạo giống như một hiệu ứng pictured here.

Tôi muốn làm điều đó trong SVG để nó có thể mở rộng và khi tôi nói về một chủ đề cụ thể (hãy nói chủ đề là 'xanh') tôi có thể phóng to phần đồ họa và các vùng chồng chéo sẽ vẫn hiển thị chính xác.

Những bài viết dường như nhận được khá gần:

• Algorithm for Additive Color Mixing for RGB Values
• Question about "Additive blending" and "Hue replacement"

Nhưng không ai trong số các thỏa thuận trên với SVG vì vậy hãy để tôi cung cấp cho nó một whirl.

Answer 1

Phiên bản này thay thế phiên bản cũ hơn không thực sự là trình duyệt chéo. Tôi nhận ra rằng tôi không cần hình dạng riêng biệt cho các vòng tròn khác nhau, tôi có thể sao chép, định vị lại và đổi màu hình dạng ban đầu trong bộ lọc.

<svg x="0px" y="0px" width="600px" height="600px" viewbox="0 0 600 600"> 

<defs> 
<filter id="B4" x="-150%" width="400%" y="-150%" height="400%"> 
    <feOffset in="SourceGraphic" result="pre-red" dx="-70" dy="-120"/> 
    <feColorMatrix in="pre-red" type="matrix" result="red" values="0 0 0 0 1 
                0 0 0 0 0 
                0 0 0 0 0 
                0 0 0 1 0"/> 

    <feOffset in="SourceGraphic" result="pre-blue" dx="70" dy="-120"/> 
    <feColorMatrix in="pre-blue" type="matrix" result="blue" values="0 0 0 0 0 
                0 0 0 0 0 
                0 0 0 0 1 
                0 0 0 1 0"/> 
    <feBlend mode="screen" in="red" in2="blue" result="main"/> 
    <feBlend mode="screen" in="main" in2="SourceGraphic"/> 
</filter> 
</defs> 

    <circle filter="url(#B4)" cx="200" cy="250" r="100" fill="#00FF00" /> 

</svg> 

Answer 2

Ngay bây giờ, bạn có thể thực hiện việc này với SVG filters. Vì sở thích của bạn nằm trong màu phối trộn, bạn có thể quan tâm đến việc nghiên cứu các bộ lọc nguyên thủy sau: feBlend, feComposite, feColorMatrix và feComponentTransfer.

Nếu bạn muốn tìm hiểu cách dễ dàng (Inkscape), hãy xem this blogpost. Tôi cũng có thể khuyên bạn nên đọc số Inkscape book và đặc biệt cách thực hiện custom filters. Here's one page hiển thị feBlend với các kết quả tương tự như trong ví dụ về hiệu ứng cơ bản của bạn.

Cập nhật:here's the relevant svg file từ cuốn sách inkscape, nó sẽ giống như hình dưới đây trong các trình duyệt có hỗ trợ bộ lọc svg (và đầu vào BackgroundImage lọc, lưu ý rằng Gecko không hỗ trợ BackgroundImage và enable-background).