SVG 教程

SVG(Scalable Vector Graphics)是用来描述可缩放矢量图形的XML格式。SVG图像在缩放时能够保持高质量。

导入 SVG文件

SVG文件可以在html文本中通过以下方式导入：

<img src="image.svg" alt="SVG图像">

在CSS样式中导入：

background-image: url("image.svg");

绘制基本图形

SVG中可以绘制各种基本图形，如线条、矩形、圆形、椭圆等。

线条

<svg>
  <line x1="0" y1="0" x2="200" y2="200" style="stroke: black;"/>
</svg>

矩形

<svg>
  <rect x="0" y="0" width="200" height="100" style="fill: none; stroke: black;"/>
</svg>

圆形

<svg>
  <circle cx="100" cy="100" r="50" style="fill: none; stroke: black;"/>
</svg>

椭圆

<svg>
  <ellipse cx="100" cy="50" rx="50" ry="25" style="fill: none; stroke: black;"/>
</svg>

绘制路径

SVG中使用路径来绘制复杂的形状。路径由一个或多个路径命令组成。

直线路径

<svg>
  <path d="M 0 0 L 200 200" style="fill: none; stroke: black;"/>
</svg>

折线路径

<svg>
  <path d="M 0 0 L 100 100 L 200 0" style="fill: none; stroke: black;"/>
</svg>

曲线路径

<svg>
  <path d="M 0 0 Q 50 50 100 0 Q 150 50 200 0" style="fill: none; stroke: black;"/>
</svg>

圆弧路径

<svg>
  <path d="M 0 0 A 50 50 0 0 1 100 0 A 50 50 0 0 1 0 0" style="fill: none; stroke: black;"/>
</svg>

添加文字

SVG中可以添加各种类型的文字。

<svg>
  <text x="100" y="50" style="font-size: 24px; fill: black; text-anchor: middle;">Hello, SVG!</text>
</svg>

渐变效果

SVG中可以使用渐变来实现丰富的效果。

线性渐变

<svg>
  <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#F5A623"/>
    <stop offset="50%" stop-color="#F5A623"/>
    <stop offset="100%" stop-color="#F8E71C"/>
  </linearGradient>
  <rect x="0" y="0" width="200" height="100" fill="url(#myGradient)" />
</svg>

径向渐变

<svg>
  <radialGradient id="myGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" stop-color="#F5A623"/>
    <stop offset="100%" stop-color="#F8E71C"/>
  </radialGradient>
  <circle cx="100" cy="50" r="50" fill="url(#myGradient)" />
</svg>

SVG动画

可以使用SVG来实现各种动画，例如移动、旋转、缩放等。

移动动画

<svg>
  <rect x="0" y="0" width="50" height="50" style="fill: red;">
    <animate attributeType="XML" attributeName="x" from="0" to="200" dur="1s" repeatCount="indefinite" />
  </rect>
</svg>

旋转动画

<svg>
  <rect x="0" y="0" width="50" height="50" style="fill: red;">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite"/>
  </rect>
</svg>

缩放动画

<svg>
  <rect x="0" y="0" width="50" height="50" style="fill: red;">
    <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="1s" repeatCount="indefinite"/>
  </rect>
</svg>

总结

SVG是一种用于描述可缩放矢量图形的XML格式，具有良好的可缩放性和可交互性。在程序员开发过程中，可以通过SVG绘制各种图像，以及实现丰富的动画效果。