Share Tạo hiệu ứng đổ bóng cho hình ảnh SVG

[filiallion]

Language

Tiếng Việt

Hình ảnh đồ hoạ SVG tôi đã giới thiệu với các bạn tại bài viết "Tìm hiểu về hình ảnh SVG" cũng như hướng dẫn các bạn vẽ một vài hình ảnh đơn giản tại bài viết "Vẽ một vài hình ảnh SVG đơn giản". Bài viết này tôi tiếp tục hướng dẫn các bạn làm việc với hình ảnh SVG thông qua việc tạo hiệu ứng đổ bóng (Hay còn gọi là shadow), các bạn cũng cần phân biệt đổ bóng mà tôi đề cập ở đây đó là hình ảnh chứ không phải sử dụng CSS.

Để tạo hiệu ứng đổ bóng cho hình ảnh SVG, các bạn cần quan tâm tới hai thẻ <defs> và <filter>, đây là hai thẻ hỗ trợ việc tạo hiệu ứng đổ bóng cho các đối tượng hình ảnh SVG.

Các bạn tham khảo ví dụ sau:

<svg height="150" width="150">
    <defs>
        <filter id="f1" x="0" y="0" width="200%" height="200%">
            <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
            <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
        </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

Và ví dụ sau:

<svg height="150" width="150">
    <defs>
        <filter id="f1" x="0" y="0" width="200%" height="200%">
            <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

Các bạn có thể tìm hiểu thêm về hiệu ứng đổ bóng cho hình ảnh SVG tại địa chỉ https://www.w3schools.com/graphics/svg_feoffset.asp.