svg基础

July 12, 2023

svg

svg 文件的 Content-Type 为 image/svg+xml
svg 图像的坐标原点是左上角

xml

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
  width="200"
  height="200">
</svg>

svg 是 svg 图像的容器元素。对于 svg 文件，命名空间属性 xmlns 是必须指定的，但在 html 中可省略。

width 和 height 属性默认值为 auto，此处指定宽高为 200*200。
viewBox 属性是空格或逗号分隔的四个数字：min-x, min-y, width and height
前两个指定实际展示区域的坐标原点（相对于原 svg 的坐标原点）
后两个指定在坐标原点的基础上截取的的宽高度
这个被截取的宽高度将放缩到原本 svg 的宽高度上展示

基本形状

xml

<rect x="60" y="10" rx="10" ry="10" width="30" height="30" />
x y 指定矩形左上角的坐标
rx ry 圆角半径
width height 宽高度

<circle cx="25" cy="75" r="20"/>
cx cy 圆心坐标
r 半径

<ellipse cx="75" cy="75" rx="20" ry="5"/>
cx cy 圆心坐标
rx ry 分别为x、y半径

<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/>
x1 y1 起点坐标
x2 y2 终点坐标

<polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/>
points 点集数列，每两个数构成一个坐标。注意分隔符可以是逗号或空格，分隔符可以随意混用！

<polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>
points 同上。但注意 polygon 的路径在最后一个点处自动回到第一个点

<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
d 指定一系列指令。指令用一个字母表示操作，后接数字为参数。
大写指令指定绝对坐标，小写指令指定相对坐标。
指令可以如下：

M x y 将画笔移动至指定坐标
m dx dy 将画笔移动指定距离

L x y 将画笔移动至指定坐标，并画线
l dx dy 将画笔移动指定距离，并画线

H x 将画笔移动至指定横坐标，并画线
h dx 将画笔在x方向移动指定距离，并画线

V y 将画笔移动至指定纵坐标，并画线
v dy 将画笔在y方向移动指定距离，并画线

Z 无参数。将画笔移动到路径的起点，并画线

C x1 y1, x2 y2, x y 画三次贝塞尔曲线，参数分别为起点的控制点、终点的控制点和曲线终点
c dx1 dy1, dx2 dy2, dx dy

S x2 y2, x y 画三次贝塞尔曲线。若此指令跟在C或S指令后，则它的第一个控制点变为前一个命令曲线的第二个控制点的中心对称点；否则，当前点将作为第一个控制点
s dx2 dy2, dx dy

Q x1 y1, x y 画二次贝塞尔曲线，参数分别为控制点和终点坐标
q dx1 dy1, dx dy

T x y 画二次贝塞尔曲线。若此指令跟在Q或T指令后，则它的控制点变为前一个曲线控制点的中心对称点
t dx dy

A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

填充和边框

fill 属性设置对象内部的颜色
stroke 属性设置绘制对象的线条的颜色
fill-opacity 控制填充色的不透明度
stroke-opacity 控制描边的不透明度
opacity 控制透明度
stroke-width 属性定义了描边的宽度
stroke-linecap 控制边框终点的形状
- butt 用直边结束线段，它是常规做法，线段边界 90 度垂直于描边的方向、贯穿它的终点。
- square 的效果差不多，但是会稍微超出实际路径的范围，超出的大小由 stroke-width 控制。
- round 表示边框的终点是圆角，圆角的半径也是由 stroke-width 控制的。
stroke-linejoin 控制两条描边线段之间用什么方式连接
- miter 是默认值，表示用方形画笔在连接处形成尖角
- round 表示用圆角连接，实现平滑效果
- bevel 在连接处会形成一个斜接。
stroke-dasharray 虚线类型应用在描边上。参数是一组（必须）用逗号分隔的数字组成的数列
- 第一个用来表示填色区域的长度
- 第二个用来表示非填色区域的长度
fill-rule 定义如何给图形重叠的区域上色
stroke-miterlimit 定义什么情况下绘制或不绘制边框连接的 miter 效果
stroke-dashoffset 定义虚线开始的位置。

如果通过 css 设置样式，将 background 改为 fill，将 border 改为 stroke

渐变

略。参见：https://developer.mozilla.org/docs/Web/SVG/Tutorial/Gradients

图案

略。参见：https://developer.mozilla.org/docs/Web/SVG/Tutorial/Patterns

文本

text 是文本的容器元素。可以直接包含文本节点，也可以包含一些特殊的文本标签
text 支持一些 css 属性，例如 font-* text-* letter-* word-*

html

<svg width="150" height="150">
    <text x="0" y="16">Hello World!</text>
</svg>

其它略。参见：https://developer.mozilla.org/docs/Web/SVG/Tutorial/Texts

基本变形

首先介绍 <g> 标签，用于分组。在该元素上设置的属性将应用到所有子元素上。

xml

<svg width="30" height="10">
  <g fill="red">
    <rect x="0" y="0" width="10" height="10" />
    <rect x="20" y="0" width="10" height="10" />
  </g>
</svg>

svg 的图形元素支持 transform 属性，同 css 的 transform 属性

与 css 一致，故略。参见：https://developer.mozilla.org/docs/Web/SVG/Tutorial/Basic_Transformations

←Back to home