html5 怎么写svg格式

HTML5 是一种用于构建网页的标准标记语言，而 SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，SVG 可以用于创建动态和交互式的图像，具有可缩放性、透明度和动画效果等优点，在 HTML5 中，我们可以使用 SVG 来创建各种形状、图标和图表等。

下面将介绍如何在 HTML5 中使用 SVG 格式进行绘图。

1、SVG 的基本结构

SVG 文档由一个根元素 <svg> 和一个或多个图形元素组成，每个图形元素都是一个自闭合的标签，<circle>、<rect>、<polygon> 等，这些图形元素可以通过属性来定义其位置、大小、颜色等属性。

2、绘制基本形状

在 HTML5 中，我们可以使用以下几种基本形状元素来绘制图形：

<circle>：绘制圆形。

<rect>：绘制矩形。

<polygon>：绘制多边形。

<ellipse>：绘制椭圆形。

<line>：绘制直线或折线。

<path>：绘制自定义路径。

下面是一些示例代码，演示如何使用这些元素来绘制基本形状：

<!-绘制一个红色的圆形 -->
<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>
<!-绘制一个蓝色的矩形 -->
<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="blue" />
</svg>
<!-绘制一个绿色的三角形 -->
<svg width="200" height="200">
  <polygon points="50,100 150,10 250,190" fill="green" />
</svg>

3、添加样式和动画效果

除了基本的形状元素，SVG 还提供了丰富的样式和动画效果，我们可以通过设置属性来改变图形的颜色、线条粗细、透明度等样式，SVG 还支持 CSS 样式和动画效果的直接应用。

下面是一些示例代码，演示如何为图形添加样式和动画效果：

<!-绘制一个带有边框的红色圆形 -->
<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="red" stroke="black" stroke-width="2" />
</svg>
<!-绘制一个带有渐变色的矩形 -->
<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="url(gradient)" />
</svg>

4、使用路径元素绘制复杂图形

路径元素是 SVG 中最强大的绘图工具之一，它允许我们通过指定一系列的坐标点来绘制自定义的路径，路径可以是直线、曲线、贝塞尔曲线等，我们还可以使用路径命令来控制路径的形状和连接方式。

下面是一些示例代码，演示如何使用路径元素来绘制复杂图形：

<!-绘制一个心形 -->
<svg width="200" height="200">
  <path d="M100,50 C147.619,82.3975 182.381,124.756 182.381,176.249 L182.381,176.249 C182.381,216.743 147.619,258.243 100,258.243 C52.381,258.243 17.619,216.743 17.619,176.249 L17.619,176.249 C17.619,124.756 52.381,82.3975 100,50 Z" fill="red" />
</svg>

以上就是在 HTML5 中使用 SVG 格式进行绘图的基本介绍，通过掌握这些基本技巧，我们可以在网页中创建出丰富多样的矢量图形，提升用户体验和视觉效果。