Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies如何建立 SVG 投影陰影？
投影陰影透過賦予 SVG 3D 效果或立體感，提升了外觀，SVG 投影陰影可以使用 SVG 濾鏡以及盒陰影或濾鏡屬性來建立。
- SVG 濾鏡：提供對陰影屬性的細粒度控制。
- CSS 盒陰影或濾鏡：使用更簡單的語法應用陰影。
建立 SVG 投影陰影的方法
在 SVG 中使用 <filter> 元素
這是一種功能強大的方法，允許對陰影效果進行詳細控制，包括模糊、偏移和顏色調整，SVG 濾鏡定義應用於元素的圖形效果，而 <feDropShadow> 濾鏡原語簡化了投影陰影的建立。
示例程式碼
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="200" height="200"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dropShadow" x="0" y="0"
width="200%" height="200%">
<feDropShadow dx="5" dy="5" stdDeviation="4"
flood-color="black" flood-opacity="0.5" />
</filter>
</defs>
<circle cx="50" cy="50" r="40" fill="green"
filter="url(#dropShadow)" />
</svg>
</body>
</html>
輸出
使用 CSS 濾鏡
可以將 CSS 濾鏡：投影陰影；應用於 SVG 元素，濾鏡：投影陰影 CSS 屬性比使用 SVG 濾鏡簡單，並可透過 CSS 樣式表或樣式屬性直接應用。
示例程式碼
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="200" height="200"
xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="green"
style="filter: drop-shadow(5px 5px 4px rgba(0,0,0,0.5));" />
</svg>
</body>
</html>
輸出
更新於：2024-11-22
3 瀏覽
廣告