Học SVG

Hướng dẫn làm nhòe đối tượng trong SVG

Posted on by admin

Đầu tiên, mình sẽ tạo một khung bao bằng thẻ <svg> như sau:

<svg width="400" height="200" style="background: #00A389"></svg>

Hướng dẫn làm nhòe đối tượng trong SVG 4

Sau đó, mình sẽ tạo hình chữ bằng thẻ <rect/> và di chuyển hình đến vị trí trung tâm:

<svg width="400" height="200" style="background: #00A389">
  <rect x='100' y='50' width='200' height='100' fill='#FFD600'/>
</svg>

Hướng dẫn làm nhòe đối tượng trong SVG 5
Tiếp theo, mình sẽ tạo hiệu ứng GaussianBlur bằng thẻ <feGaussianBlur/>, đặt bên trong thẻ <filter>. Từ thẻ <rect/> mình sẽ liên kết với với thẻ <filter> thông qua thuộc tính [ filter=’url(#id)’ ].
Bạn có thể tăng giảm độ nhòe đối tượng từ thuộc tính stdDeviation, ở đây mình sẽ để là 10.

<svg width="400" height="200" style="background: #00A389">
  <filter id='f1'>
    <feGaussianBlur stdDeviation='10'/>
  </filter>
  <rect x="100" y="50" width="200" height="100" fill="#FFD600" filter='url(#f1)'/>
</svg>

Hướng dẫn làm nhòe đối tượng trong SVG 6
Bây giờ, bạn có thể tạo ra hiệu ứng làm nhòe bằng SVG Filter thật dễ dàng!

Nguồn: www.naututs.com