SVG探索(二):绘制基础图形

本文正在参加「金石计划」

前言

首先,SVG 是什么?

SVG 是指可缩放矢量图形(Scalable Vector Graphics,SVG),基于 XML 标记语言,可以用于描述二维的矢量图形。显而易见,SVG 格式提供的是矢量图,因此图片可以被无限放大而不失真或降低质量,并且可以方便地修改内容和进行定制化开发。

在前端开发工作中,我们经常用到 iconfont 等生成的字体图标,此外,还可以使用自定义的 SVG 图标实现进度条效果、图标按钮效果等。本文介绍了几种常见的基础图形的实现方法。

本文绘制的基础图形一览如下:

圆和圆弧 circle

之前的文章中,我们实现了画圆和画圆弧的效果。

具体是,在svg标签中定义circle标签,并设置其属性:r 表示圆的半径、cx和cy分别表示圆心的坐标、fill为圆的颜色(可以设置transparent表示不填充颜色),这样就实现了一个圆。

<svg
  width="100"
  height="100"
  viewBox="0 0 100 100"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
>
  <circle
    r="50"
    cx="50"
    cy="50"
    fill="palegreen"
  />
</svg>

那么,画圆弧呢?

首先,我们设置 circle 标签的fill="transparent",也就是透明效果;接着,设置stroke: green; stroke-width: 8px; transform-origin: center;设置圆的描边效果;此外,还需要设置stroke-dasharray为圆的周长,stroke-dashoffset为实际长度,也就实现了圆弧效果。

需要注意的是,stroke-dashoffset的数值越小,圆弧越接近一个圆。

椭圆 ellipse

  • cx属性定义的椭圆中心的x坐标
  • cy属性定义的椭圆中心的y坐标
  • rx属性定义的水平半径
  • ry属性定义的垂直半径
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="150" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

直线 line

x1, y1 定义直线的起点,x2, y2 定义直线的终点:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0); stroke-width:2"/>
</svg>

文本 text

参考这里,举个例子:

<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <style>
    .small {
      font: italic 13px sans-serif;
    }
    .heavy {
      font: bold 30px sans-serif;
    }
  </style>
  <text x="20" y="35" class="small">My</text>
  <text x="40" y="35" class="heavy">cat</text>
</svg>

矩形 rect

width, height 设置宽高,x, y 设置矩形的坐标,rx, ry 相当于 border-radius 属性。

<svg width="200" height="200" viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rectangle -->
  <rect width="100" height="100" />
  <!-- Rounded corner rectangle -->
  <rect x="120" width="100" height="100" rx="15" />
</svg>

多段线 polyline

在 points 中定义各个点,每个点的坐标用空格隔开,不同点的坐标用逗号分隔。

<p>画一个五角星</p>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="100 10,40 180,190 60,10 60,160 180" style="fill:blue;stroke:blue;stroke-width:1" />
</svg>

多边形 polygon

和 polyline 类似的用法。二者的区别是 polygon 是封闭的图形,而 polyline 是点的连线路径,是不封闭的。如果 polyline 要形成封闭的图形,需要起点坐标和终点坐标一样。

<svg width="150" height="150">
  <polygon points="50,50 100,50 100,100 50,100"  fill="none" stroke="red" stroke-width="1" />
</svg>
<svg width="150" height="150">
  <polyline points="50,50 100,50 100,100 50,100"  fill="none" stroke="red" stroke-width="1" />
</svg>
<svg width="150" height="150">
  <polyline points="50,50 100,50 100,100 50,100 50,50"  fill="none" stroke="red" stroke-width="1" />
</svg>

路径 path

d 属性定义了要绘制的路径,有如下属性:

  • MoveTo: M, m
  • LineTo: L, l, H, h, V, v
  • Cubic Bézier Curve(三次): C, c, S, s
  • Quadratic Bézier Curve(二次): Q, q, T, t
  • Elliptical Arc Curve(椭圆曲线弧): A, a
  • ClosePath: Z, z

其中,大写表示绝对定位,小写表示相对定位。

举个例子,下面两种路径绘制的图形是一样的:

<svg xmlns="http://www.w3.org/2000/svg">
  <!-- LineTo commands with absolute coordinates -->
  <path fill="none" stroke="red"
        d="M 10,10
           L 90,90
           V 10
           H 50" />
  <!-- LineTo commands with relative coordinates -->
  <path fill="none" stroke="red"
        d="M 110,10
           l 80,80
           v -80
           h -40" />
</svg>

后记

在本文中,作者介绍了几种常见的基础图形的实现方法。SVG 是一种强大的语言,在前端开发中有着广泛的应用,可以帮助我们实现矢量图形的绘制和定制化开发等。

参考

原文链接:https://juejin.cn/post/7216703870683840570 作者:觅迹

(0)
上一篇 2023年4月3日 下午4:47
下一篇 2023年4月3日 下午4:58

相关推荐

发表评论

登录后才能评论