SVG标记-HTML

SVG（Scalable Vector Graphics）是一种用于创建可缩放矢量图像的XML语言。它可以用于创建图表、图形和动画效果。

在HTML中，可以使用svg标记来嵌入SVG图像。

基本用法

<svg width="400" height="400">
  <circle cx="200" cy="200" r="100" />
</svg>

上面的代码将创建一个SVG圆形图形，并指定其半径和圆心位置。

绘制形状

SVG提供了多种形状，包括矩形、圆形、椭圆、直线、多边形等等。通过在svg标记内添加具体的形状标记，可以创造出各种自定义的图形。

以下是一些最常见的形状标记：

矩形

<rect x="50" y="50" width="200" height="100" />

上面的代码将创建一个长200像素，高100像素的矩形，其左上角坐标为（50,50）。

圆形

<circle cx="100" cy="100" r="50" />

上面的代码将创建一个半径为50像素的圆，其圆心坐标为（100,100）。

椭圆

<ellipse cx="150" cy="75" rx="100" ry="50" />

上面的代码将创建一个椭圆形状，其长半轴为100像素，短半轴为50像素，并指定其中心点坐标为（150,75）。

直线

<line x1="50" y1="50" x2="150" y2="150" />

上面的代码将创建一条从（50,50）到（150,150）的直线。

多边形

<polygon points="100,10 40,198 190,78 10,78 160,198" />

上面的代码将创建一个五边形，其顶点坐标分别为（100,10）、（40,198）、（190,78）、（10,78）和（160,198）。

绘制文本

在SVG中，可以使用text标记来添加文本。

<svg>
  <text x="50" y="50">Hello World!</text>
</svg>

上面的代码将在SVG图像中添加一段文本，其左上角坐标为（50,50）。

添加样式

可以使用CSS来为SVG图像添加样式，例如设置填充色、边框颜色等等。

<svg>
  <rect x="50" y="50" width="200" height="100" style="fill: red; stroke: black; stroke-width: 2px;" />
</svg>

上面的代码将为矩形添加红色填充，黑色边框，宽度为2像素。

动画效果

SVG还支持通过JavaScript为图像添加各种动画效果，例如平移、旋转、缩放等等。

下面的代码将创建一个SVG圆形，并为其添加旋转动画效果：

<svg>
  <circle cx="100" cy="100" r="50">
    <animateTransform attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0"
                      to="360"
                      dur="5s"
                      repeatCount="indefinite"/>
  </circle>
</svg>

上面的代码将为圆形添加一个旋转动画效果，时长为5秒，并设置为无限循环。

总结

SVG是一个非常强大的工具，可以用于创建各种复杂的图表和图形。通过学习SVG标记的用法，你可以更加轻松地为自己的网站添加各种炫酷的动画效果和可视化图表。