svg详细参数
<path d="M...Z" fill="#e30016" fill-rule="nonzero"></path>里面
fill-rule="nonzero" 对交叠区域进行填充
fill-rule: evenodd; 不对交叠区域进行填充
<div class="box" style="width: 100% ;height: 300px;margin-bottom: 5%;display: flex;">
<!-- 1. 图形与图表
SVG是绘制动态图表的强大工具，比如：
饼图、柱状图、折线图（结合D3.js等工具库）
自定义统计图 -->
<div class="list">
<svg width="300" height="200">
<rect x="50" y="50" width="50" height="100" fill="green" />
<rect x="120" y="80" width="50" height="70" fill="blue" />
</svg>
</div>
<!-- 2. 动画效果
SVG支持原生动画，通过 <animate> 或 <animateTransform> 标签实现。
简单动画 -->
<div class="list">
<svg width="200" height="200">
<circle cx="50" cy="50" r="30" fill="orange">
<animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
</circle>
</svg>
</div>
<div class="list">
<svg width="200" height="200">
<rect x="50" y="50" width="50" height="50" fill="purple">
<animateTransform
attributeName="transform"
type="rotate"
from="0 75 75" to="360 75 75"
dur="2s"
repeatCount="indefinite" />
</rect>
</svg>
</div>
<!-- 3. 交互式SVG
SVG可以和JavaScript结合实现交互效果，例如点击、鼠标悬停等。 -->
<div class="list">
<svg width="200" height="200" id="interactive-svg">
<circle cx="100" cy="100" r="50" fill="blue" />
</svg>
<script>
const circle = document.querySelector('#interactive-svg circle');
circle.addEventListener('mouseover', () => circle.setAttribute('fill', 'green'));
circle.addEventListener('mouseout', () => circle.setAttribute('fill', 'blue'));
</script>
</div>
<!-- 4. 图标与矢量插画
SVG文件可用于设计自适应图标、Logo和矢量插画，保证清晰度和缩放效果。
使用外部SVG文件 -->
<div class="list">
<svg width="100" height="100">
<use href="icon.svg#icon-id" />
</svg>
</div>
<!-- SVG高级技术
1. SVG路径 <path>
SVG路径是最复杂但最强大的工具，用于绘制曲线和复杂形状。 -->
<div class="list">
<svg width="200" height="200">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
stroke="black" fill="transparent" stroke-width="2" />
</svg>
</div>
<!-- M: 移动到指定点（Move）
L: 画直线（Line）
C: 三次贝塞尔曲线（Cubic）
S: 平滑曲线
Z: 关闭路径 -->
<!-- 2. 渐变与模式填充
SVG支持渐变和图案填充，通过 <defs> 定义。 -->
<div class="list">
<svg width="200" height="200">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:blue;stop-opacity:1" />
<stop offset="100%" style="stop-color:green;stop-opacity:1" />
</linearGradient>
</defs>
<rect x="10" y="10" width="180" height="180" fill="url(#grad1)" />
</svg>
<svg width="200" height="200">
<defs>
<pattern id="dots" patternUnits="userSpaceOnUse" width="10" height="10">
<circle cx="5" cy="5" r="2" fill="red" />
</pattern>
</defs>
<rect x="0" y="0" width="200" height="200" fill="url(#dots)" />
</svg>
</div>
<!-- 3. SVG滤镜
SVG支持各种滤镜效果，如模糊、阴影。 -->
<div class="list">
<svg width="200" height="200">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<circle cx="100" cy="100" r="50" fill="red" filter="url(#blur)" />
</svg>
<svg width="200" height="200">
<defs>
<filter id="shadow">
<feDropShadow dx="4" dy="4" stdDeviation="4" flood-color="black" />
</filter>
</defs>
<rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#shadow)" />
</svg>
</div>
<!-- 4. 文本特效
SVG文本支持路径动画、文字沿路径排列等。
沿路径排列文本 -->
<div class="list"></div>
<svg width="400" height="200">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" id="curve" />
<text fill="black" font-size="20">
<textPath href="#curve">This is SVG text along a path!</textPath>
</text>
</svg>
</div>
