HTML5之SVG 2D入门4—笔画与填充

HTML5之SVG 2D入门4—笔画与填充是介绍SVG 2D绘图中的笔画和填充的入门教程，主要涉及路径绘制、线段绘制、填充等相关知识点。

一、路径绘制

SVG的路径绘制继承于数学模型的路径的概念，而数学模型的路径是由点和线段组成的。SVG支持多种绘制路径，包括直线、二次贝塞尔曲线、三次贝塞尔曲线、弧线、圆弧等。

1.直线绘制

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <path d="M50,50 L250 50" stroke="black" stroke-width="3"/>
</svg>

上面的代码绘制了一条起点为(50,50)终点为(250,50)的直线，stroke属性指定了线条的颜色，stroke-width属性指定了线条的粗细。

2.三次贝塞尔曲线绘制

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <path d="M50,100 C100,0 200,200 250,100" stroke="black" stroke-width="3" fill="none"/>
</svg>

上面的代码绘制了一条起点为(50,100)控制点为(100,0)和(200,200)的三次贝塞尔曲线，终点为(250,100)。fill属性指定了曲线的填充颜色，none表示不填充。

二、线段绘制

SVG的线段绘制比路径绘制简单，只需要指定线段的起点和终点即可。线段的属性同样包括stroke和stroke-width。

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <line x1="50" y1="150" x2="250" y2="150" stroke="black" stroke-width="3"/>
</svg>

上面的代码绘制了一条起点为(50,150)终点为(250,150)的线段。

三、填充

SVG的填充属性包括fill和fill-opacity，用于指定填充的颜色和透明度。可以将填充的样式设置为纯色、渐变或图案等。

1.纯色填充

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <rect x="50" y="50" width="200" height="100" fill="red"/>
</svg>

上面的代码绘制了一个起点为(50,50)大小为200x100的矩形，用红色填充。

2.渐变填充

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <defs>
    <linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
      <stop offset="5%" stop-color="white"/>
      <stop offset="95%" stop-color="red"/>
    </linearGradient>
  </defs>
  <rect x="50" y="50" width="200" height="100" fill="url(#Gradient1)"/>
</svg>

上面的代码绘制了一个起点为(50,50)大小为200x100的矩形，用名为Gradient1的线性渐变填充。渐变的坐标系统是相对于被渐变填充的对象的，例如线性渐变中起点(0,0)表示被填充对象的左上角，终点(0,1)表示被填充对象的左下角。

3.图案填充

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <defs>
    <pattern id="Pattern1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="20" height="20" fill="white"/>
      <circle cx="10" cy="10" r="5" fill="red"/>
    </pattern>
  </defs>
  <rect x="50" y="50" width="200" height="100" fill="url(#Pattern1)"/>
</svg>

上面的代码绘制了一个起点为(50,50)大小为200x100的矩形，用名为Pattern1的图案填充。该图案由一个大小为20x20的矩形和一个圆形组成，patternUnits属性指定了图案的坐标系统是相对于绘制对象的。

以上是HTML5之SVG 2D入门4—笔画与填充的完整攻略，包括路径绘制、线段绘制和填充等相关知识点，其中路径绘制示例展示了直线绘制和三次贝塞尔曲线绘制，填充示例展示了纯色填充、渐变填充和图案填充。