HTML学习笔记(五) SVG

<svg> 标签用于声明一个 SVG 文档片段，它内置许多标签帮助开发者绘制图形

0、基本介绍

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）

它的本质其实就是对图片进行描述的文本，因此无论我们将图片放大多少倍都不会失真

使用 SVG 的方式有很多，以下是最常见的几种：

  • 将 SVG 代码直接插入 HTML
  • 将 SVG 代码保存为一个文件，在 HTML 中通过标签引入
  • 将 SVG 代码保存为一个文件，在 CSS 中作为资源引入

1、创建容器

使用 <svg> 标签可以声明一个 SVG 文档片段，如果不指定属性 width、height，那么默认宽高为 300*150

<!DOCTYPE html>
<html>
<head>
    <title>SVG Demo</title>
</head>
<body>
    <svg id="graph" width="300px" height="300px"></svg>
</body>
</html>

2、图形标签

在容器中，预定义有一些图形标签，方便开发者用于绘制图形

（0）通用属性

这些图形标签有一些通用的属性，用于控制图形的样式

  • fill：设置图形内部的颜色
  • fill-opacity：设置内部颜色的不透明度
  • stroke：设置图形边框的颜色
  • stroke-width：设置图形边框的宽度
  • stroke-opacity：设置边框颜色的不透明度

（1）矩形

使用 <rect> 标签可以绘制矩形，该标签常用的属性如下：

  • x：矩形左上角 X 轴坐标
  • y：矩形左上角 Y 轴坐标
  • width：矩形宽度
  • height：矩形高度
  • rx：X 轴方位的圆角半径
  • ry：Y 轴方位的圆角半径
<svg id="graph" width="300px" height="300px">
    <rect x="100" y="100" width="100" height="100" />
</svg>

（2）圆形

使用 <circle> 标签可以绘制圆形，该标签常用的属性如下：

  • cx：圆心 X 轴坐标
  • cy：圆心 Y 轴坐标
  • r：半径
<svg id="graph" width="300px" height="300px">
    <circle cx="150" cy="150" r="100" />
</svg>

（3）椭圆

使用 <ellipse> 标签可以绘制椭圆，该标签常用的属性如下：

  • cx：椭圆中心 X 轴坐标
  • cy：椭圆中心 Y 轴坐标
  • rx：水平半径
  • ry：垂直半径
<svg id="graph" width="300px" height="300px">
    <ellipse cx="150" cy="150" rx="100" ry="50" />
</svg>

（4）线段

使用 <line> 标签可以绘制线段，该标签常用的属性如下：

  • x1：线段起点 X 轴坐标
  • y1：线段起点 Y 轴坐标
  • x2：线段终点 X 轴坐标
  • y2：线段终点 Y 轴坐标
<svg id="graph" width="300px" height="300px">
    <line x1="50" y1="50" x2="250" y2="250" stroke="black" />
</svg>

（5）折线

折线其实就是由一条条线段连接而成，使用 <polyline> 标签可以绘制折线，常用的属性如下：

  • points：定义一组节点，每个节点包含两个数字，分别代表这个点的 X、Y 坐标
<svg id="graph" width="300px" height="300px">
    <polyline points="150 100,100 200,200 200" fill="none" stroke="black" />
</svg>

（6）多边形

多边形和折线类似，区别在于多边形最后会自动闭合，使用 <polygon> 标签可以绘制多边形，常用的属性如下：

  • points：定义一组节点，节点之间使用逗号隔开，每个节点包含两个数字，分别代表这个点的 X、Y 坐标
<svg id="graph" width="300px" height="300px">
    <polygon points="150 100,100 200,200 200" fill="none" stroke="black" />
</svg>

（7）路径

路径可以用于绘制任何图形，使用 <path> 标签可以绘制路径，它通过属性 d 定义绘制的顺序

实际上它的值表示一组绘制命令，通过简写的字母表示动作，后面跟着必要的参数，常见的命令如下：

只移动不绘制

  • M x y：将当前点移动到 (x, y)

绘制直线

  • L x y：从当前点到 (x, y) 画一条直线
  • H x：从当前点水平移动 x 像素画一条直线，若 x 为正数，则沿着 X 轴正方向移动，反之则沿着负方向移动
  • V y：从当前点垂直移动 y 像素画一条直线，若 y 为正数，则沿着 Y 轴正方向移动，反之则沿着负方向移动
  • Z：从当前点到起始点画一条直线，它的作用相当于闭合路径

绘制曲线

  • A rx ry x-axis-rotation large-arc-flag sweep-flag x y：绘制弧形

    rx 表示椭圆 X 轴半径，ry 表示椭圆 Y 轴半径，x-axis-rotation 表示椭圆相对于坐标轴的旋转角度

    对于 large-arc-flag，若值为 0，表示绘制小弧部分，若值为 1，表示绘制大弧部分

    对于 sweep-flag，若值为 0，表示逆时针绘制，若值为 1，表示顺时针绘制

    x 表示圆弧终点 X 轴坐标，y 表示圆弧终点 Y 轴坐标

  • Q cx cy x y：绘制二次贝塞尔曲线

    (cx, cy) 表示控制点的坐标，(x, y) 表示结束点的坐标

  • T x y：绘制二次贝塞尔曲线的简写命令

    如果该命令前面是 Q 或者 T 命令，那么它的控制点就是上一个控制点关于上一个终点的对称点

    如果该命令单独使用，那么它的控制点和终点是同一个点

  • C cx1 cy1 cx2 cy2 x y：绘制三次贝塞尔曲线

    (cx1, cy1) 表示第一个控制点的坐标，(cx2, cy2) 表示第二个控制点的坐标，(x, y) 表示结束点的坐标

  • S cx2 cy2 x y：绘制三次贝塞尔曲线的简写命令

    如果该命令前面是 C 或者 S 命令，那么它的第一个控制点就是上一个控制点关于上一个终点的对称点

    如果该命令单独使用，那么它的第一个控制点和第二个控制点是同一个点

<svg id="graph" width="300px" height="300px">
    <path d="M 150 150
             L 250 150
             A 100 100 0 0 0 50 150"
          fill="none"
          stroke="black" />
</svg>

（8）文本

使用 <text> 标签可以绘制文本，该标签常用的属性如下：

  • x：表示文本区域基线起点 X 轴坐标
  • y：表示文本区域基线起点 Y 轴坐标
<svg id="graph" width="300px" height="300px">
    <text x="50" y="50">Hello World</text>
</svg>

3、功能标签

除了图形标签，在容器中还能使用一些功能标签实现特定功能

（1）展示

使用 <use> 标签可以复制并展示一个图形，常用的属性如下：

  • href：指定要复制的节点
  • x：左上角 X 轴坐标
  • y：左上角 Y 轴坐标
<svg id="graph" width="300px" height="300px">
    <circle id="myCircle" cx="50" cy="50" r="50" />
    <use href="#myCircle" x="200" y="200" />
</svg>

（2）组合

使用 <g> 标签可以将多个图形组合在一起

<svg id="graph" width="300px" height="300px">
    <g id="cross">
        <line x1="20" y1="20" x2="80" y2="80" stroke="black" />
        <line x1="80" y1="20" x2="20" y2="80" stroke="black" />
    </g>

    <use href="#cross" x="200" y="200" />
</svg>

（3）定义

使用 <defs> 标签可以自定义一个图形，这个图形不会被显示，但能被引用

<svg id="graph" width="300px" height="300px">
    <defs>
        <g id="hook">
            <line x1="10" y1="50" x2="40" y2="90" stroke="black" />
            <line x1="40" y1="90" x2="90" y2="10" stroke="black" />
        </g>
    </defs>

    <use href="#hook" x="200" y="200" />
</svg>

（4）模式

使用 <pattern> 标签可以自定义一个图形，这个图形不会被显示，但能被引用填充一个区域，常用的属性如下：

  • x：边界框左上角 X 轴坐标，默认为 0
  • y：边界框左上角 Y 轴坐标，默认为 0
  • width：边界框宽度，默认为 0
  • height：边界框高度，默认为 0
  • patternUnits：定义图案效果区域的单位，可选值如下：
    • userSpaceOnUse：表示使用当前用户坐标系中的值
    • objectBoundingBox：表示引用边界框的分数或百分比的值
<svg id="graph" width="300px" height="300px">
    <pattern id="dot" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
        <circle cx="10" cy="10" r="5" />
    </pattern>

    <rect x="100" y="100" width="100" height="100" fill="url(#dot)" />
</svg>

（5）图片

使用 <image> 标签可以插入图片，使用 xlink:href 属性指定图片来源

<svg id="graph" width="300px" height="300px">
    <image xlink:href="image.jpg" width="50%" height="50%" />
</svg>

（6）动画

使用 <animate> 标签可以产生动画，常用的属性如下：

  • attributeName：产生动画的属性名称
  • from：属性的初始值
  • to：属性的结束值
  • dur：动画的持续时间
  • repeatCount：动画的循环模式
<svg id="graph" width="300px" height="300px">
    <ellipse cx="150" cy="150" rx="100" ry="50">
        <animate attributeName="rx" from="100" to="300" dur="2s" repeatCount="indefinite" />
        <animate attributeName="ry" from="50" to="300" dur="2s" repeatCount="indefinite" />
    </ellipse>
</svg>

【 阅读更多 HTML 系列文章，请看 HTML学习笔记 】

posted @ 2020-03-11 21:43  半虹  阅读(481)  评论(0)  编辑  收藏  举报