Search K
Appearance
8.4 SVG高级特效
关键词
SVG渐变、滤镜效果、剪切路径、蒙版、图案填充、高级特效、视觉效果
学习目标
- 掌握SVG渐变效果的创建和应用
- 学会使用SVG滤镜实现视觉特效
- 理解剪切路径和蒙版的概念和用法
- 掌握图案填充的技术
- 能够创建复杂的视觉效果
详细内容
8.4.1 SVG渐变效果
线性渐变
创建线性渐变效果：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG线性渐变</title>
</head>
<body>
<h1>SVG线性渐变效果</h1>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- 定义渐变 -->
<defs>
<!-- 水平渐变 -->
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:red" />
<stop offset="100%" style="stop-color:blue" />
</linearGradient>
<!-- 垂直渐变 -->
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:yellow" />
<stop offset="50%" style="stop-color:green" />
<stop offset="100%" style="stop-color:blue" />
</linearGradient>
<!-- 对角渐变 -->
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:orange" />
<stop offset="100%" style="stop-color:purple" />
</linearGradient>
<!-- 复杂渐变 -->
<linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:red;stop-opacity:1" />
<stop offset="25%" style="stop-color:yellow;stop-opacity:1" />
<stop offset="50%" style="stop-color:green;stop-opacity:0.8" />
<stop offset="75%" style="stop-color:blue;stop-opacity:0.6" />
<stop offset="100%" style="stop-color:purple;stop-opacity:0.4" />
</linearGradient>
</defs>
<!-- 应用渐变 -->
<rect x="50" y="50" width="200" height="80" fill="url(#grad1)"/>
<text x="60" y="35" font-family="Arial" font-size="12">水平渐变</text>
<rect x="300" y="50" width="200" height="80" fill="url(#grad2)"/>
<text x="310" y="35" font-family="Arial" font-size="12">垂直多色渐变</text>
<rect x="50" y="180" width="200" height="80" fill="url(#grad3)"/>
<text x="60" y="165" font-family="Arial" font-size="12">对角渐变</text>
<rect x="300" y="180" width="200" height="80" fill="url(#grad4)"/>
<text x="310" y="165" font-family="Arial" font-size="12">透明度渐变</text>
<!-- 文本渐变 -->
<text x="50" y="320" font-family="Arial" font-size="36" font-weight="bold"
fill="url(#grad1)">渐变文本</text>
<!-- 路径渐变 -->
<path d="M 300 300 Q 400 250 500 300 Q 450 350 400 300 Q 350 250 300 300"
fill="url(#grad2)" stroke="url(#grad3)" stroke-width="3"/>
</svg>
</body>
</html>径向渐变
创建径向渐变效果：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG径向渐变</title>
</head>
<body>
<h1>SVG径向渐变效果</h1>
<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- 定义径向渐变 -->
<defs>
<!-- 中心渐变 -->
<radialGradient id="radial1" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:white" />
<stop offset="100%" style="stop-color:blue" />
</radialGradient>
<!-- 偏移中心渐变 -->
<radialGradient id="radial2" cx="30%" cy="30%" r="70%">
<stop offset="0%" style="stop-color:yellow" />
<stop offset="50%" style="stop-color:orange" />
<stop offset="100%" style="stop-color:red" />
</radialGradient>
<!-- 椭圆渐变 -->
<radialGradient id="radial3" cx="50%" cy="50%" rx="60%" ry="30%">
<stop offset="0%" style="stop-color:lightblue" />
<stop offset="100%" style="stop-color:darkblue" />
</radialGradient>
<!-- 透明径向渐变 -->
<radialGradient id="radial4" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:green;stop-opacity:1" />
<stop offset="70%" style="stop-color:green;stop-opacity:0.5" />
<stop offset="100%" style="stop-color:green;stop-opacity:0" />
</radialGradient>
</defs>
<!-- 应用径向渐变 -->
<circle cx="150" cy="100" r="80" fill="url(#radial1)"/>
<text x="100" y="30" font-family="Arial" font-size="12">中心径向渐变</text>
<circle cx="400" cy="100" r="80" fill="url(#radial2)"/>
<text x="340" y="30" font-family="Arial" font-size="12">偏移中心渐变</text>
<ellipse cx="150" cy="250" rx="100" ry="60" fill="url(#radial3)"/>
<text x="90" y="180" font-family="Arial" font-size="12">椭圆径向渐变</text>
<circle cx="400" cy="250" r="80" fill="url(#radial4)"/>
<text x="340" y="180" font-family="Arial" font-size="12">透明径向渐变</text>
<!-- 组合效果 -->
<rect x="50" y="330" width="500" height="40" fill="url(#radial1)"/>
<text x="280" y="355" font-family="Arial" font-size="16" fill="white" text-anchor="middle">径向渐变背景</text>
</svg>
</body>
</html>8.4.2 SVG滤镜效果
基本滤镜
创建模糊、阴影等基本滤镜效果：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG基本滤镜</title>
</head>
<body>
<h1>SVG基本滤镜效果</h1>
<svg width="700" height="500" xmlns="http://www.w3.org/2000/svg">
<!-- 定义滤镜 -->
<defs>
<!-- 模糊滤镜 -->
<filter id="blur">
<feGaussianBlur stdDeviation="3"/>
</filter>
<!-- 阴影滤镜 -->
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="5" dy="5" stdDeviation="3" flood-color="black" flood-opacity="0.5"/>
</filter>
<!-- 发光滤镜 -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- 浮雕滤镜 -->
<filter id="emboss">
<feConvolveMatrix kernelMatrix="3 0 0 0 0 0 0 0 -3"/>
</filter>
<!-- 色彩调整滤镜 -->
<filter id="colorMatrix">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
<feComponentTransfer>
<feFuncR type="gamma" amplitude="1.2" exponent="0.8"/>
<feFuncG type="gamma" amplitude="1.2" exponent="0.8"/>
<feFuncB type="gamma" amplitude="1.2" exponent="0.8"/>
</feComponentTransfer>
</filter>
</defs>
<!-- 原始图形 -->
<rect x="50" y="50" width="100" height="60" fill="blue"/>
<text x="60" y="35" font-family="Arial" font-size="12">原始图形</text>
<!-- 模糊效果 -->
<rect x="200" y="50" width="100" height="60" fill="blue" filter="url(#blur)"/>
<text x="210" y="35" font-family="Arial" font-size="12">模糊效果</text>
<!-- 阴影效果 -->
<rect x="350" y="50" width="100" height="60" fill="blue" filter="url(#shadow)"/>
<text x="360" y="35" font-family="Arial" font-size="12">阴影效果</text>
<!-- 发光效果 -->
<rect x="500" y="50" width="100" height="60" fill="red" filter="url(#glow)"/>
<text x="510" y="35" font-family="Arial" font-size="12">发光效果</text>
<!-- 文本滤镜 -->
<text x="50" y="180" font-family="Arial" font-size="24" font-weight="bold"
fill="green" filter="url(#shadow)">阴影文本</text>
<text x="250" y="180" font-family="Arial" font-size="24" font-weight="bold"
fill="orange" filter="url(#glow)">发光文本</text>
<!-- 路径滤镜 -->
<path d="M 50 220 Q 100 180 150 220 Q 200 260 250 220"
stroke="purple" stroke-width="4" fill="none" filter="url(#shadow)"/>
<!-- 复杂图形滤镜 -->
<g filter="url(#emboss)">
<circle cx="400" cy="200" r="40" fill="lightblue"/>
<text x="385" y="205" font-family="Arial" font-size="12">浮雕</text>
</g>
<!-- 组合滤镜效果 -->
<rect x="50" y="280" width="150" height="100" fill="yellow" filter="url(#colorMatrix)"/>
<text x="70" y="265" font-family="Arial" font-size="12">色彩调整</text>
</svg>
</body>
</html>高级滤镜组合
创建复杂的滤镜组合效果：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG高级滤镜</title>
</head>
<body>
<h1>SVG高级滤镜组合</h1>
<svg width="700" height="500" xmlns="http://www.w3.org/2000/svg">
<!-- 定义高级滤镜 -->
<defs>
<!-- 立体按钮滤镜 -->
<filter id="button3d" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.75"
specularExponent="20" lighting-color="white" result="specOut">
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
<!-- 水波纹滤镜 -->
<filter id="water" x="-50%" y="-50%" width="200%" height="200%">
<feTurbulence baseFrequency="0.1" numOctaves="3" result="turbulence"/>
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="10"/>
</filter>
<!-- 玻璃效果滤镜 -->
<filter id="glass" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
<feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.6 0"/>
<feOffset dx="2" dy="2" result="offset"/>
<feMerge>
<feMergeNode in="offset"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- 霓虹灯效果 -->
<filter id="neon" x="-50%" y="-50%" width="200%" height="200%">
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 1 0"/>
<feGaussianBlur stdDeviation="6" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- 火焰效果 -->
<filter id="fire" x="-50%" y="-50%" width="200%" height="200%">
<feTurbulence baseFrequency="0.9" numOctaves="4" result="noise"/>
<feColorMatrix in="noise" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feOffset dx="0" dy="-20" result="offset"/>
<feGaussianBlur stdDeviation="5" result="blur"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0.4 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feComposite in2="SourceGraphic" operator="over"/>
</filter>
</defs>
<!-- 应用高级滤镜 -->
<rect x="50" y="50" width="120" height="60" fill="lightblue" filter="url(#button3d)"/>
<text x="80" y="85" font-family="Arial" font-size="12" text-anchor="middle">3D按钮</text>
<rect x="200" y="50" width="120" height="60" fill="blue" filter="url(#water)"/>
<text x="230" y="85" font-family="Arial" font-size="12" text-anchor="middle">水波纹</text>
<rect x="350" y="50" width="120" height="60" fill="rgba(255,255,255,0.3)"
stroke="gray" stroke-width="1" filter="url(#glass)"/>
<text x="380" y="85" font-family="Arial" font-size="12" text-anchor="middle">玻璃效果</text>
<text x="50" y="180" font-family="Arial" font-size="24" font-weight="bold"
fill="white" stroke="blue" stroke-width="1" filter="url(#neon)">霓虹文字</text>
<text x="300" y="180" font-family="Arial" font-size="24" font-weight="bold"
fill="red" filter="url(#fire)">火焰文字</text>
<!-- 复杂图形组合 -->
<g filter="url(#button3d)">
<circle cx="100" cy="250" r="40" fill="gold"/>
<text x="100" y="255" font-family="Arial" font-size="12" text-anchor="middle">金币</text>
</g>
<g filter="url(#glass)">
<path d="M 250 220 Q 300 180 350 220 Q 300 260 250 220" fill="lightblue"/>
<text x="270" y="200" font-family="Arial" font-size="10">玻璃图案</text>
</g>
<!-- 滤镜动画容器 -->
<rect x="50" y="320" width="600" height="120" fill="black"/>
<text x="350" y="340" font-family="Arial" font-size="14" fill="white" text-anchor="middle">滤镜效果展示区</text>
<circle cx="150" cy="380" r="30" fill="yellow" filter="url(#neon)"/>
<rect x="250" y="350" width="60" height="60" fill="red" filter="url(#fire)"/>
<ellipse cx="400" cy="380" rx="40" ry="25" fill="lightblue" filter="url(#water)"/>
<polygon points="500,360 520,400 480,400" fill="green" filter="url(#button3d)"/>
</svg>
</body>
</html>8.4.3 剪切路径和蒙版
剪切路径
使用剪切路径创建特殊形状：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG剪切路径</title>
</head>
<body>
<h1>SVG剪切路径效果</h1>
<svg width="700" height="500" xmlns="http://www.w3.org/2000/svg">
<!-- 定义剪切路径 -->
<defs>
<!-- 圆形剪切路径 -->
<clipPath id="circleClip">
<circle cx="100" cy="100" r="60"/>
</clipPath>
<!-- 星形剪切路径 -->
<clipPath id="starClip">
<path d="M 100 10 L 110 40 L 140 40 L 118 58 L 128 88 L 100 70 L 72 88 L 82 58 L 60 40 L 90 40 Z"/>
</clipPath>
<!-- 文字剪切路径 -->
<clipPath id="textClip">
<text x="50" y="80" font-family="Arial" font-size="60" font-weight="bold">HTML</text>
</clipPath>
<!-- 复杂路径剪切 -->
<clipPath id="complexClip">
<path d="M 50 50 Q 100 0 150 50 Q 200 100 150 150 Q 100 200 50 150 Q 0 100 50 50"/>
</clipPath>
<!-- 多个形状组合剪切 -->
<clipPath id="multiClip">
<circle cx="80" cy="80" r="40"/>
<rect x="120" y="60" width="60" height="40"/>
<polygon points="200,60 220,100 180,100"/>
</clipPath>
</defs>
<!-- 应用剪切路径 -->
<g clip-path="url(#circleClip)">
<rect x="40" y="40" width="120" height="120" fill="red"/>
<rect x="80" y="60" width="40" height="80" fill="blue"/>
<circle cx="100" cy="100" r="20" fill="yellow"/>
</g>
<text x="60" y="180" font-family="Arial" font-size="12">圆形剪切</text>
<g clip-path="url(#starClip)" transform="translate(200,0)">
<rect x="40" y="40" width="120" height="120" fill="green"/>
<circle cx="100" cy="100" r="30" fill="orange"/>
<rect x="80" y="80" width="40" height="40" fill="purple"/>
</g>
<text x="260" y="180" font-family="Arial" font-size="12">星形剪切</text>
<g clip-path="url(#textClip)" transform="translate(400,0)">
<rect x="40" y="40" width="120" height="120" fill="blue"/>
<circle cx="70" cy="70" r="20" fill="white"/>
<circle cx="130" cy="70" r="20" fill="white"/>
<rect x="60" y="100" width="80" height="20" fill="white"/>
</g>
<text x="460" y="180" font-family="Arial" font-size="12">文字剪切</text>
<g clip-path="url(#complexClip)" transform="translate(0,200)">
<rect x="0" y="0" width="200" height="200" fill="purple"/>
<circle cx="100" cy="100" r="50" fill="yellow"/>
<rect x="75" y="75" width="50" height="50" fill="red"/>
</g>
<text x="60" y="420" font-family="Arial" font-size="12">复杂路径剪切</text>
<g clip-path="url(#multiClip)" transform="translate(250,200)">
<rect x="0" y="0" width="250" height="150" fill="orange"/>
<circle cx="125" cy="75" r="40" fill="blue"/>
<rect x="100" y="50" width="50" height="50" fill="green"/>
</g>
<text x="310" y="420" font-family="Arial" font-size="12">多形状组合剪切</text>
</svg>
</body>
</html>蒙版效果
使用蒙版创建透明度效果：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG蒙版效果</title>
</head>
<body>
<h1>SVG蒙版效果</h1>
<svg width="700" height="500" xmlns="http://www.w3.org/2000/svg">
<!-- 定义蒙版 -->
<defs>
<!-- 渐变蒙版 -->
<mask id="gradientMask">
<rect width="100%" height="100%" fill="url(#maskGradient)"/>
</mask>
<linearGradient id="maskGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:white;stop-opacity:1" />
<stop offset="50%" style="stop-color:white;stop-opacity:0.5" />
<stop offset="100%" style="stop-color:white;stop-opacity:0" />
</linearGradient>
<!-- 径向蒙版 -->
<mask id="radialMask">
<rect width="100%" height="100%" fill="black"/>
<circle cx="100" cy="100" r="60" fill="white"/>
</mask>
<!-- 文字蒙版 -->
<mask id="textMask">
<rect width="100%" height="100%" fill="black"/>
<text x="50" y="80" font-family="Arial" font-size="60" font-weight="bold" fill="white">SVG</text>
</mask>
<!-- 图案蒙版 -->
<mask id="patternMask">
<rect width="100%" height="100%" fill="black"/>
<g fill="white">
<circle cx="50" cy="50" r="20"/>
<circle cx="150" cy="50" r="20"/>
<circle cx="100" cy="120" r="20"/>
</g>
</mask>
<!-- 复杂蒙版 -->
<mask id="complexMask">
<rect width="100%" height="100%" fill="black"/>
<path d="M 50 50 Q 100 0 150 50 Q 200 100 150 150 Q 100 200 50 150 Q 0 100 50 50" fill="white"/>
<circle cx="100" cy="100" r="30" fill="gray"/>
</mask>
</defs>
<!-- 应用蒙版 -->
<rect x="50" y="50" width="200" height="100" fill="red" mask="url(#gradientMask)"/>
<text x="100" y="40" font-family="Arial" font-size="12">渐变蒙版</text>
<rect x="300" y="50" width="200" height="200" fill="blue" mask="url(#radialMask)"/>
<text x="350" y="40" font-family="Arial" font-size="12">径向蒙版</text>
<rect x="50" y="200" width="200" height="100" fill="green" mask="url(#textMask)"/>
<text x="100" y="190" font-family="Arial" font-size="12">文字蒙版</text>
<rect x="300" y="280" width="200" height="150" fill="orange" mask="url(#patternMask)"/>
<text x="350" y="270" font-family="Arial" font-size="12">图案蒙版</text>
<rect x="50" y="350" width="200" height="200" fill="purple" mask="url(#complexMask)"/>
<text x="100" y="340" font-family="Arial" font-size="12">复杂蒙版</text>
<!-- 蒙版与图片结合 -->
<rect x="520" y="50" width="150" height="100" fill="yellow"/>
<rect x="520" y="50" width="150" height="100" fill="red" mask="url(#gradientMask)"/>
<text x="550" y="40" font-family="Arial" font-size="12">蒙版叠加</text>
</svg>
</body>
</html>8.4.4 图案填充
创建和应用图案
使用pattern元素创建重复图案：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG图案填充</title>
</head>
<body>
<h1>SVG图案填充</h1>
<svg width="700" height="500" xmlns="http://www.w3.org/2000/svg">
<!-- 定义图案 -->
<defs>
<!-- 圆点图案 -->
<pattern id="dots" patternUnits="userSpaceOnUse" width="20" height="20">
<circle cx="10" cy="10" r="3" fill="red"/>
</pattern>
<!-- 条纹图案 -->
<pattern id="stripes" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width="10" height="10" fill="white"/>
<rect width="5" height="10" fill="blue"/>
</pattern>
<!-- 棋盘图案 -->
<pattern id="checkerboard" patternUnits="userSpaceOnUse" width="20" height="20">
<rect width="20" height="20" fill="white"/>
<rect width="10" height="10" fill="black"/>
<rect x="10" y="10" width="10" height="10" fill="black"/>
</pattern>
<!-- 星形图案 -->
<pattern id="stars" patternUnits="userSpaceOnUse" width="30" height="30">
<rect width="30" height="30" fill="navy"/>
<path d="M 15 5 L 17 12 L 25 12 L 19 17 L 21 25 L 15 20 L 9 25 L 11 17 L 5 12 L 13 12 Z" fill="gold"/>
</pattern>
<!-- 花朵图案 -->
<pattern id="flowers" patternUnits="userSpaceOnUse" width="40" height="40">
<rect width="40" height="40" fill="lightgreen"/>
<circle cx="20" cy="20" r="8" fill="pink"/>
<circle cx="20" cy="20" r="4" fill="yellow"/>
</pattern>
<!-- 几何图案 -->
<pattern id="geometry" patternUnits="userSpaceOnUse" width="30" height="30">
<rect width="30" height="30" fill="white"/>
<polygon points="15,3 27,15 15,27 3,15" fill="purple"/>
<circle cx="15" cy="15" r="5" fill="white"/>
</pattern>
<!-- 文字图案 -->
<pattern id="textPattern" patternUnits="userSpaceOnUse" width="60" height="30">
<rect width="60" height="30" fill="lightblue"/>
<text x="30" y="20" font-family="Arial" font-size="12" text-anchor="middle" fill="darkblue">HTML</text>
</pattern>
</defs>
<!-- 应用图案填充 -->
<rect x="50" y="50" width="120" height="80" fill="url(#dots)"/>
<text x="80" y="40" font-family="Arial" font-size="12">圆点图案</text>
<rect x="200" y="50" width="120" height="80" fill="url(#stripes)"/>
<text x="230" y="40" font-family="Arial" font-size="12">条纹图案</text>
<rect x="350" y="50" width="120" height="80" fill="url(#checkerboard)"/>
<text x="380" y="40" font-family="Arial" font-size="12">棋盘图案</text>
<rect x="500" y="50" width="120" height="80" fill="url(#stars)"/>
<text x="530" y="40" font-family="Arial" font-size="12">星形图案</text>
<circle cx="110" cy="200" r="50" fill="url(#flowers)"/>
<text x="80" y="270" font-family="Arial" font-size="12">花朵图案</text>
<ellipse cx="260" cy="200" rx="60" ry="40" fill="url(#geometry)"/>
<text x="220" y="270" font-family="Arial" font-size="12">几何图案</text>
<polygon points="400,150 450,170 480,210 420,230 370,210" fill="url(#textPattern)"/>
<text x="400" y="270" font-family="Arial" font-size="12">文字图案</text>
<!-- 图案描边 -->
<rect x="50" y="300" width="150" height="100" fill="white" stroke="url(#stripes)" stroke-width="10"/>
<text x="80" y="290" font-family="Arial" font-size="12">图案描边</text>
<!-- 文本图案填充 -->
<text x="250" y="350" font-family="Arial" font-size="36" font-weight="bold" fill="url(#stars)">图案文字</text>
<!-- 路径图案填充 -->
<path d="M 450 320 Q 500 280 550 320 Q 600 360 550 400 Q 500 440 450 400 Q 400 360 450 320"
fill="url(#flowers)" stroke="url(#geometry)" stroke-width="5"/>
<text x="480" y="460" font-family="Arial" font-size="12">路径图案</text>
</svg>
</body>
</html>8.4.5 特效组合应用
创建综合视觉效果
组合多种特效创建复杂的视觉效果：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG特效组合</title>
</head>
<body>
<h1>SVG特效组合应用</h1>
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
<!-- 定义所有特效 -->
<defs>
<!-- 渐变定义 -->
<linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FFD700"/>
<stop offset="50%" style="stop-color:#FFA500"/>
<stop offset="100%" style="stop-color:#FF6347"/>
</linearGradient>
<radialGradient id="glowGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:white;stop-opacity:0"/>
<stop offset="70%" style="stop-color:blue;stop-opacity:0.3"/>
<stop offset="100%" style="stop-color:blue;stop-opacity:0.8"/>
</radialGradient>
<!-- 图案定义 -->
<pattern id="sparkles" patternUnits="userSpaceOnUse" width="20" height="20">
<rect width="20" height="20" fill="transparent"/>
<circle cx="5" cy="5" r="1" fill="white"/>
<circle cx="15" cy="15" r="1" fill="white"/>
<circle cx="10" cy="2" r="0.5" fill="yellow"/>
<circle cx="3" cy="18" r="0.5" fill="yellow"/>
</pattern>
<!-- 滤镜定义 -->
<filter id="combinedFilter" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="black" flood-opacity="0.3"/>
<feGaussianBlur stdDeviation="1" result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- 剪切路径 -->
<clipPath id="titleClip">
<text x="50" y="80" font-family="Arial" font-size="60" font-weight="bold">效果展示</text>
</clipPath>
<!-- 蒙版 -->
<mask id="fadeMask">
<linearGradient id="fadeGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:white"/>
<stop offset="100%" style="stop-color:black"/>
</linearGradient>
<rect width="100%" height="100%" fill="url(#fadeGradient)"/>
</mask>
</defs>
<!-- 背景效果 -->
<rect width="800" height="600" fill="url(#glowGradient)"/>
<!-- 主标题 - 组合多种特效 -->
<g clip-path="url(#titleClip)">
<rect x="0" y="0" width="400" height="120" fill="url(#goldGradient)"/>
<rect x="0" y="0" width="400" height="120" fill="url(#sparkles)"/>
</g>
<!-- 装饰性图形组合 -->
<g transform="translate(50, 150)">
<!-- 立体按钮效果 -->
<rect x="0" y="0" width="100" height="60" fill="url(#goldGradient)"
filter="url(#combinedFilter)" rx="10"/>
<text x="50" y="35" font-family="Arial" font-size="12" text-anchor="middle" fill="white">按钮</text>
<!-- 发光圆形 -->
<circle cx="200" cy="30" r="25" fill="cyan" filter="url(#combinedFilter)"/>
<circle cx="200" cy="30" r="15" fill="white" opacity="0.8"/>
<!-- 图案填充多边形 -->
<polygon points="300,10 330,20 340,50 310,60 280,50 270,20"
fill="url(#sparkles)" stroke="url(#goldGradient)" stroke-width="3"/>
</g>
<!-- 文字特效展示 -->
<text x="100" y="280" font-family="Arial" font-size="36" font-weight="bold"
fill="url(#goldGradient)" filter="url(#combinedFilter)">渐变滤镜文字</text>
<!-- 复杂图形组合 -->
<g transform="translate(100, 320)">
<!-- 背景装饰 -->
<rect x="0" y="0" width="600" height="200" fill="url(#sparkles)" opacity="0.3"/>
<!-- 主要图形 -->
<circle cx="100" cy="100" r="60" fill="url(#goldGradient)" filter="url(#combinedFilter)"/>
<rect x="200" y="40" width="120" height="120" fill="red" filter="url(#combinedFilter)"
mask="url(#fadeMask)"/>
<path d="M 400 50 Q 450 30 500 50 Q 550 70 500 100 Q 450 130 400 100 Q 350 70 400 50"
fill="url(#glowGradient)" stroke="url(#goldGradient)" stroke-width="3"/>
<!-- 装饰元素 -->
<g fill="white" opacity="0.7">
<circle cx="80" cy="80" r="3"/>
<circle cx="120" cy="80" r="3"/>
<circle cx="100" cy="60" r="2"/>
<circle cx="100" cy="140" r="2"/>
</g>
</g>
<!-- 底部信息栏 -->
<rect x="0" y="550" width="800" height="50" fill="url(#goldGradient)" opacity="0.8"/>
<text x="400" y="580" font-family="Arial" font-size="16" text-anchor="middle"
fill="white">SVG高级特效综合应用示例</text>
</svg>
</body>
</html>关键要点总结
- 渐变效果：掌握线性和径向渐变的创建和应用
- 滤镜系统：理解SVG滤镜的工作原理和组合使用
- 剪切路径：使用clipPath创建特殊形状的显示区域
- 蒙版技术：利用mask实现透明度和淡入淡出效果
- 图案填充：创建重复图案用于填充和装饰
参考资源
常见问题解答
Q: 如何优化SVG滤镜的性能？ A: 合理设置滤镜区域，避免过度使用复杂滤镜，使用transform代替滤镜实现简单效果。
Q: 剪切路径和蒙版的区别是什么？ A: 剪切路径是硬边界切割，蒙版支持透明度渐变，可以实现更复杂的透明效果。
Q: 如何创建无缝重复的图案？ A: 确保图案边界能够完美对接，使用合适的patternUnits和尺寸设置。
Q: 滤镜效果在不同浏览器中的兼容性如何？ A: 现代浏览器都支持SVG滤镜，但复杂滤镜可能存在性能差异，建议测试目标浏览器。
Q: 如何实现SVG元素的多重渐变效果？ A: 可以使用多个元素叠加，或者在单个渐变中设置多个颜色停止点。