HTML SVG - HTML学习网站

SVG概述

SVG（可缩放矢量图形）是一种基于XML的图形格式，可以创建高质量的矢量图形：


<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" 
            stroke="black" stroke-width="3" 
            fill="red" />
</svg>

基本SVG

基本图形

SVG支持多种基本图形：

矩形


<rect x="50" y="50" width="100" height="50"
      fill="#e8491d" stroke="#35424a" 
      stroke-width="2" />

圆形


<circle cx="100" cy="75" r="40"
        fill="#e8491d" stroke="#35424a" 
        stroke-width="2" />

线条


<line x1="50" y1="50" x2="150" y2="100"
      stroke="#e8491d" stroke-width="2" />

路径

使用path元素创建复杂图形：


<path d="M 100 20 L 180 180 L 20 180 Z"
      fill="#e8491d" stroke="#35424a" 
      stroke-width="2" />

文本

SVG可以添加文本元素：


<text x="150" y="50" 
      text-anchor="middle" 
      fill="#e8491d" 
      font-size="24" 
      font-family="Arial">
    Hello SVG!
</text>

渐变和填充

SVG支持多种填充效果：

线性渐变

径向渐变

动画效果

SVG支持多种动画效果：


<circle cx="100" cy="100" r="50" fill="#e8491d">
    <animate attributeName="r" 
             values="50;60;50" 
             dur="2s" 
             repeatCount="indefinite" />
</circle>

交互效果

SVG可以响应用户交互：


<circle cx="100" cy="100" r="50"
        fill="#e8491d"
        onmouseover="this.style.fill='#35424a'"
        onmouseout="this.style.fill='#e8491d'" />

SVG最佳实践

使用适当的视图框（viewBox）
优化SVG代码
使用语义化的元素和属性
考虑可访问性
提供降级方案
使用适当的压缩工具
注意性能优化
保持代码可维护性

HTML SVG教程

SVG概述

基本SVG

基本图形

矩形

圆形

线条

路径

文本

渐变和填充

线性渐变

径向渐变

动画效果

交互效果

SVG最佳实践

SVG应用示例

图标

图表

装饰图形