pin_drop当前位置:知识文库 ❯ 图文
多媒体：SVG渐变 - 完整教程与代码示例
一、教程简介
SVG 渐变允许在图形填充和描边中使用平滑的颜色过渡效果。SVG 支持两种渐变类型：<linearGradient> 线性渐变和 <radialGradient> 径向渐变。渐变定义在 <defs> 元素中，通过 url(#id) 引用。本教程将详细讲解 SVG 渐变的创建、配置和使用方法。
二、核心概念
渐变定义位置
渐变必须定义在 <defs> 元素内部，作为可复用的定义：
代码示例
<defs>
<linearGradient id="myGrad">...</linearGradient>
</defs>
<rect fill="url(#myGrad)" />渐变坐标系统
-
objectBoundingBox（默认）：使用元素边界框的百分比（0~1）
-
userSpaceOnUse：使用用户空间坐标（实际像素值）
三、语法与用法
linearGradient - 线性渐变
代码示例
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#e94560" />
<stop offset="100%" stop-color="#58a6ff" />
</linearGradient>radialGradient - 径向渐变
代码示例
<radialGradient id="grad2" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="100%" stop-color="#58a6ff" />
</radialGradient>stop - 色标
代码示例
<stop offset="0%" stop-color="#e94560" stop-opacity="1" />spreadMethod - 扩展方式
四、代码示例
示例1：SVG 渐变全面演示
代码示例
<!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>
<style>
body {
margin: 0; padding: 20px;
background: #0d1117; color: #c9d1d9;
font-family: 'Segoe UI', sans-serif;
display: flex; flex-direction: column; align-items: center;
}
svg { background: #161b22; border-radius: 8px; border: 1px solid #30363d; }
</style>
</head>
<body>
<h1>SVG 渐变全面演示</h1>
<svg width="750" height="500" viewBox="0 0 750 500">
<defs>
<!-- 水平线性渐变 -->
<linearGradient id="hGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#e94560" />
<stop offset="50%" stop-color="#f8b500" />
<stop offset="100%" stop-color="#3fb950" />
</linearGradient>
<!-- 垂直线性渐变 -->
<linearGradient id="vGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#58a6ff" />
<stop offset="100%" stop-color="#1f6feb" />
</linearGradient>
<!-- 对角线性渐变 -->
<linearGradient id="dGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#d2a8ff" />
<stop offset="100%" stop-color="#f78166" />
</linearGradient>
<!-- 径向渐变 -->
<radialGradient id="rGrad1" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="100%" stop-color="#58a6ff" />
</radialGradient>
<!-- 偏心径向渐变（球体效果） -->
<radialGradient id="rGrad2" cx="35%" cy="35%" r="65%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="30%" stop-color="#e94560" />
<stop offset="100%" stop-color="#5a1020" />
</radialGradient>
<!-- 透明渐变 -->
<linearGradient id="fadeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#58a6ff" stop-opacity="1" />
<stop offset="100%" stop-color="#58a6ff" stop-opacity="0" />
</linearGradient>
<!-- reflect 扩展 -->
<linearGradient id="reflectGrad" x1="0%" y1="0%" x2="25%" y2="0%" spreadMethod="reflect">
<stop offset="0%" stop-color="#e94560" />
<stop offset="100%" stop-color="#58a6ff" />
</linearGradient>
<!-- repeat 扩展 -->
<linearGradient id="repeatGrad" x1="0%" y1="0%" x2="25%" y2="0%" spreadMethod="repeat">
<stop offset="0%" stop-color="#3fb950" />
<stop offset="100%" stop-color="#f8b500" />
</linearGradient>
</defs>
<!-- 线性渐变 -->
<text x="130" y="25" text-anchor="middle" font-size="13" fill="#58a6ff" font-weight="bold">水平渐变</text>
<rect x="10" y="35" width="240" height="50" rx="6" fill="url(#hGrad)" />
<text x="375" y="25" text-anchor="middle" font-size="13" fill="#58a6ff" font-weight="bold">垂直渐变</text>
<rect x="260" y="35" width="230" height="50" rx="6" fill="url(#vGrad)" />
<text x="620" y="25" text-anchor="middle" font-size="13" fill="#58a6ff" font-weight="bold">对角渐变</text>
<rect x="500" y="35" width="240" height="50" rx="6" fill="url(#dGrad)" />
<!-- 径向渐变 -->
<text x="130" y="115" text-anchor="middle" font-size="13" fill="#58a6ff" font-weight="bold">径向渐变</text>
<circle cx="130" cy="170" r="45" fill="url(#rGrad1)" />
<text x="375" y="115" text-anchor="middle" font-size="13" fill="#58a6ff" font-weight="bold">球体效果</text>
<circle cx="375" cy="170" r="45" fill="url(#rGrad2)" />
<text x="620" y="115" text-anchor="middle" font-size="13" fill="#58a6ff" font-weight="bold">透明渐变</text>
<rect x="500" y="130" width="240" height="80" rx="6" fill="url(#fadeGrad)" />
<!-- spreadMethod -->
<text x="190" y="245" text-anchor="middle" font-size="13" fill="#58a6ff" font-weight="bold">spreadMethod: reflect</text>
<rect x="10" y="255" width="360" height="40" rx="6" fill="url(#reflectGrad)" />
<text x="560" y="245" text-anchor="middle" font-size="13" fill="#58a6ff" font-weight="bold">spreadMethod: repeat</text>
<rect x="380" y="255" width="360" height="40" rx="6" fill="url(#repeatGrad)" />
<!-- 渐变描边 -->
<text x="375" y="325" text-anchor="middle" font-size="13" fill="#58a6ff" font-weight="bold">渐变描边</text>
<rect x="200" y="340" width="350" height="60" rx="10" fill="none" stroke="url(#hGrad)" stroke-width="4" />
<!-- 渐变文字 -->
<text x="375" y="435" text-anchor="middle" font-size="42" font-weight="bold" fill="url(#hGrad)">
渐变文字
</text>
<!-- 渐变按钮 -->
<text x="375" y="475" text-anchor="middle" font-size="13" fill="#58a6ff" font-weight="bold">渐变按钮</text>
<rect x="100" y="485" width="150" height="35" rx="17" fill="url(#vGrad)" />
<text x="175" y="507" text-anchor="middle" font-size="13" fill="#fff">Primary</text>
<rect x="300" y="485" width="150" height="35" rx="17" fill="url(#dGrad)" />
<text x="375" y="507" text-anchor="middle" font-size="13" fill="#fff">Gradient</text>
<rect x="500" y="485" width="150" height="35" rx="17" fill="url(#hGrad)" />
<text x="575" y="507" text-anchor="middle" font-size="13" fill="#fff">Rainbow</text>
</svg>
</body>
</html>五、浏览器兼容性
所有现代浏览器完整支持 SVG 渐变，包括 IE9+。
六、注意事项与最佳实践
1. 渐变定义在 defs 中
代码示例
<defs>
<linearGradient id="myGrad">...</linearGradient>
</defs>
<rect fill="url(#myGrad)" />2. gradientUnits 选择
代码示例
<!-- objectBoundingBox：相对于元素边界框（默认） -->
<linearGradient id="grad1" gradientUnits="objectBoundingBox">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
<!-- userSpaceOnUse：使用绝对坐标 -->
<linearGradient id="grad2" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="500" y2="0">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="blue" />
</linearGradient>3. 渐变可复用
代码示例
<defs>
<linearGradient id="sharedGrad">...</linearGradient>
</defs>
<rect fill="url(#sharedGrad)" />
<circle fill="url(#sharedGrad)" />
<text fill="url(#sharedGrad)" />4. 焦点偏移实现光照效果
代码示例
<radialGradient id="sphere" cx="40%" cy="35%" r="60%">
<stop offset="0%" stop-color="#fff" />
<stop offset="50%" stop-color="#58a6ff" />
<stop offset="100%" stop-color="#1f6feb" />
</radialGradient>七、代码规范示例
代码示例
<!-- 推荐：渐变命名规范 -->
<defs>
<!-- 使用语义化 ID -->
<linearGradient id="btn-primary-gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#58a6ff" />
<stop offset="100%" stop-color="#1f6feb" />
</linearGradient>
<radialGradient id="sphere-gradient" cx="35%" cy="35%" r="65%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="100%" stop-color="#1f6feb" />
</radialGradient>
</defs>八、常见问题与解决方案
常见问题
渐变在多个形状上显示不一致？
原因：objectBoundingBox 模式下，渐变相对于每个元素的边界框计算，不同大小和位置的元素会显示不同的渐变效果。
解决方案：使用 userSpaceOnUse 让所有元素共享同一渐变：
代码示例
<linearGradient id="shared" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="500" y2="0">
...
</linearGradient>如何实现渐变动画？
解决方案：使用 CSS 或 SMIL 动画：
代码示例
<linearGradient id="animGrad">
<stop offset="0%" stop-color="#e94560">
<animate attributeName="stop-color" values="#e94560;#58a6ff;#e94560" dur="3s" repeatCount="indefinite" />
</stop>
</linearGradient>九、总结
SVG 渐变是创建丰富视觉效果的重要工具，关键要点：
-
linearGradient：线性渐变，通过 x1/y1/x2/y2 定义方向
-
radialGradient：径向渐变，通过 cx/cy/r/fx/fy 定义区域
-
stop：色标，定义渐变中的关键颜色点
-
gradientUnits：坐标系统，objectBoundingBox 或 userSpaceOnUse
-
spreadMethod：扩展方式，pad/reflect/repeat
-
defs：渐变定义在 defs 中，通过 url(#id) 引用
-
可复用：一个渐变可被多个元素引用
下一教程将介绍 SVG 图案的使用。
标签：
SVG渐变
线性渐变
径向渐变
色标stop
渐变描边
球体效果
本文涉及AI创作
内容由AI创作，请仔细甄别
