SVG绘图基础

阿超前端
226 阅读4分钟

如何绘制一个svg图形

创建svg画布，设置宽、高

<svg width="200" height="200">
  <circle cx="100" cy="100" r="90" stroke="black" stroke-width="5" fill="yellow" fill-opacity="0.5" stroke-opacity="0.5" opacity="0.1"/>
</svg>
  • SVG 图像以 元素开头
  • 元素的 width 和 height 属性定义 SVG 图像的宽度和高度
  • 元素用于绘制圆形
  • cx 和 cy 属性定义圆心的 x 和 y 坐标。如果未设置 cx 和 cy，则圆心设置为 (0, 0)
  • r 属性定义圆的半径
  • stroke 和 stroke-width 属性控制形状轮廓的显示方式。我们将圆的轮廓设置为 4 像素的绿色“边框”
  • fill 属性设置圆内的颜色。我们将填充颜色设置为黄色
  • fill-opacity 定义圆内部颜色的透明度
  • stroke-opacity 定义圆边框颜色的透明度
  • opacity 定义整个圆的透明度
  • 标签关闭 SVG 图像

svg可以绘制哪些基本图形

  • 矩形
  • 圆形
  • 椭圆形
  • 直线
  • 折线
  • 多边形
  • 路径

绘制矩形

<svg width="200" height="200">
  <rect x="10" y="10" rx="20" ry="20" width="100" height="100" fill="red" stroke="black" stroke-width="5"/>
</svg>
  • x 定义矩形的左侧位置
  • y 定义矩形的顶端位置
  • rx 和 ry 属性定义圆角的水平半径和垂直半径
  • width 定义矩形的宽度
  • height 定义矩形的高度
  • fill 定义矩形内部的颜色
  • stroke 定义矩形边框的颜色
  • stroke-width 定义矩形边框的宽度

绘制圆形

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="yellow" stroke="black" stroke-width="5"/>
</svg>
  • cx 定义圆心的 x 坐标
  • cy 定义圆心的 y 坐标
  • r 属性定义圆的半径

绘制椭圆形

<svg width="200" height="200">
  <ellipse cx="100" cy="100" rx="50" ry="100" fill="yellow" stroke="black" stroke-width="5"/>
</svg>
  • cx 定义椭圆圆心的 x 坐标
  • cy 定义椭圆圆心的 y 坐标
  • rx 属性定义椭圆的 x 半径
  • ry 属性定义椭圆的 y 半径

绘制直线

<svg width="200" height="200">
  <line x1="10" y1="10" x2="100" y2="100" stroke="black" stroke-width="5"/>
</svg>
  • x1 定义直线起点的 x 坐标
  • y1 定义直线起点的 y 坐标
  • x2 定义直线终点的 x 坐标
  • y2 定义直线终点的 y 坐标

绘制折线

<svg width="200" height="200">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="red" stroke="black" stroke-width="5"/>
</svg>
  • points 定义绘制折线所需的点列表（x 和 y坐标对）
  • fill 定义填充区域的颜色（值为none表示不填充）

绘制多边形

<svg width="200" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198" fill="red" stroke="black" stroke-width="5" fill-rule="nonzero"/>
</svg>
  • points 属性定义多边形每个角的 x 和 y 坐标
  • fill-rule 定义封闭区域的填充规则（默认值是 nonzero） nonzero 填充非零区域 evenodd 填充基数区域 计数规则：从区域内部做水平射线，在与图形相交的点，如果是左近右出+1，如果是右进左出-1

绘制路径

<svg width="200" height="200">
  <path d="M10 10 H 90 V 90 H 10 L 10 10" fill="red" stroke="black" stroke-width="5"/>
</svg>
  • M = moveto（移动到）
  • L = lineto（画线到）
  • H = horizontal lineto（水平线到）
  • V = vertical lineto（垂直线到）
  • C = curveto（曲线到）
  • S = smooth curveto（平滑曲线到）
  • Q = quadratic Bézier curve（二次贝塞尔曲线）
  • T = smooth quadratic Bézier curveto（平滑二次贝塞尔曲线）
  • A = elliptical Arc（椭圆弧）
  • Z = closepath（闭合路径）

笔触

<svg width="200" height="200">
  <g fill="none">
    <path d="M10 10 H 90" stroke="red" stroke-width="10"/>
    <path d="M10 30 H 90" stroke="blue" stroke-width="10" stroke-dasharray="5,5"/>
    <path d="M10 50 H 90" stroke="green" stroke-width="10" stroke-linecap="round"/>
    <path d="M10 60 H 90" stroke="green" stroke-width="10" stroke-linecap="butt"/>
    <path d="M10 70 H 90" stroke="green" stroke-width="10" stroke-linecap="square"/>
  </g>
</svg>
  • stroke 设置笔画颜色
  • stroke-width 设置笔画粗细
  • stroke-linecap 设置开放路径首位样式 butt 默认 round 圆形 square 正方形
  • stroke-dasharray 设置虚线样式

滤镜

<svg width="200" height="200">
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
</svg>
  • 元素的 id 属性定义了滤镜的唯一名称
  • 元素定义模糊效果
  • in="SourceGraphic" 定义为整个元素创建的效果
  • stdDeviation 属性定义模糊量
  • 元素的 filter 属性将该元素链接到 "f1" 滤镜

阴影

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <!-- id唯一标识滤镜，
      x,y 定义了滤镜的原始位置
      width,height 定义了滤镜的输出图像的尺寸 -->
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <!-- 
      result标识feOffset的输出，
      in标识feOffset的输入
      dx,dy 定义了阴影的偏移量 -->
      <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <!-- 
      result标识feColorMatrix的输出，
      in标识feColorMatrix的输入
      type定义了转换矩阵，
      values定义了转换矩阵的值  -->
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <!-- 
      result标识feGaussianBlur的输出，
      in标识feGaussianBlur的输入
      stdDeviation定义了模糊量 -->
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      <!-- 
      in 属性定义了滤镜的输入
      in2 属性定义了滤镜的第二个输入
      mode 属性定义了如何将输入图像与第一个输入图像进行组合 -->
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg>

线性渐变

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
  • id 属性定义了渐变的唯一名称
  • x1、x2、y1、y2 属性定义渐变的开始和结束位置
  • 每种颜色都用 标记指定
  • offset 属性用于定义渐变颜色的开始和结束位置
  • fill 属性将椭圆元素链接到渐变

径向渐变

<svg height="150" width="400">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>
  • 标签的 id 属性定义了渐变的唯一名称
  • cx、cy 和 r 属性定义最外层圆，fx 和 fy 定义最内层圆
  • 渐变的颜色范围可以由两种或多种颜色组成。每种颜色都用 标记指定
  • offset 属性用于定义渐变颜色的开始和结束位置
  • fill 属性将椭圆元素链接到渐变
avatar
文章
阅读
粉丝