Đầ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>
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>
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>
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
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf 1. Bảo vệ khỏi tấn công DoS bằng giới hạn số...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được phát hành miễn phí để tăng tính bảo mật cho server (VPS & Dedicated)....
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
V. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng đường dẫn đầy đủ Xét đoạn code php sau: <?php if (isset($_GET['file'])) { $file...
Directory traversal vulnerabilities (phần 3)
V. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm đọc file và tin tưởng đầu vào người dùng Xét đoạn code php sau:...
Directory traversal vulnerabilities (phần 2)
III. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các lỗ hổng Directory traversal cũng khác nhau. Lỗ hổng thường xuất hiện khi chương...