Làm cách nào để giảm độ mờ đục của lớp alpha trong bộ lọc svg?

Question

Tôi đang cố gắng tạo biểu trưng dưới dạng SVG. Tôi đã xuất tệp từ Illustrator. Logo có bóng đổ trên đó. Tôi đang tìm kiếm thông qua XML và tôi thấy các nút lọc

<filter filterUnits="objectBoundingBox" width="200%" height="160%" x="-15%" y="-15%" id="AI_Shadow_2"> 
<feGaussianBlur stdDeviation="2" result="blur" in="SourceAlpha"></feGaussianBlur> 
<feOffset result="offsetBlurredAlpha" in="blur" dy="0" dx="0"></feOffset> 
<feMerge> 
    <feMergeNode in="offsetBlurredAlpha"></feMergeNode> 
    <feMergeNode in="SourceGraphic"></feMergeNode> 
</feMerge> 

Có cách nào để thay đổi alpha của offsetBlurredAlpha tạo? Tôi không muốn nó bắt đầu với màu đen tinh khiết Tôi muốn nó bắt đầu với 50% màu đen để hiệu ứng bóng tối đủ sáng quanh vật thể.

Answer 1

Một cách là thêm một bộ lọc feComponentTransfer nguyên thủy, như thế này:

<filter id="dropshadow"> 
    <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
    <feOffset dx="2" dy="2"/> 
    <feComponentTransfer> 
    <feFuncA type="linear" slope="0.2"/> 
    </feComponentTransfer> 
    <feMerge> 
    <feMergeNode/> 
    <feMergeNode in="SourceGraphic"/> 
    </feMerge> 
</filter> 

Một ví dụ sống có thể được nhìn thấy here.

Answer 2

Một cách đơn giản là sử dụng opacity: 0.5. Để thực hiện việc này, thay vì tạo bộ lọc kết hợp lớp phủ với nguồn gốc ở trên cùng, hãy tạo bộ lọc cho chỉ hình thả xuống và áp dụng bộ lọc đó cho thẻ <use> tham chiếu đến hình dạng nguồn.

Có những ưu điểm khác cho cách tiếp cận này. Ví dụ, bây giờ bạn có thể áp dụng kiểu dáng riêng biệt cho bóng tối.

#arrow-shadow { 
 
\t opacity:0.5; 
 
} 
 
g:hover #arrow-shadow { 
 
\t opacity:0.7; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 200 200" width="400px"> 
 
\t <defs> 
 
\t \t <filter id="dropshadow" height="130%"> 
 
\t \t \t <feGaussianBlur in="SourceAlpha" stdDeviation="3" /> 
 
\t \t \t <feOffset dx="2" dy="2" result="offsetblur" /> 
 
\t \t </filter> 
 
\t </defs> 
 
\t <g fill="#EEE"> 
 
\t \t <use id="arrow-shadow" xlink:href="#polygon" filter="url(#dropshadow)"></use> 
 
\t \t <polygon id="polygon" 
 
\t \t \t \t points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056"/> 
 
\t \t 
 
\t </g> 
 
</svg>

Answer 3

Một cách khác để thiết lập các giá trị alpha được sử dụng bộ lọc feColorMatrix nguyên thủy. Sử dụng điều này bạn có thể thiết lập giá trị alpha và màu sắc của một bóng thả cùng một lúc.

Bộ lọc dưới đây nhân giá trị alpha 0.2 và đồng thời đặt màu của bóng thả thành màu đỏ.

<filter id="dropshadow"> 
    <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
    <feOffset dx="2" dy="2"/> 
    <feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/> 
    <feMerge> 
    <feMergeNode/> 
    <feMergeNode in="SourceGraphic"/> 
    </feMerge> 
</filter> 

Nhưng nếu bạn chỉ cần thay đổi giá trị alpha, các feComponentTransfer lọc nguyên thủy có lẽ là lựa chọn tốt hơn.