SVG(Scalable Vector Graphics) 기본 그래픽 그리기 방법 및 경로 명령

SVG(Scalable Vector Graphics) Scalable Vector Graphics
2차원 벡터 그래픽을 설명하는 데 사용되는 그래픽 형식
SVG는 오래 전에 등장했습니다
캔버스와 비교 , 일부 작은 아이콘 등을 만드는 데 더 적합합니다.
HTML5는 인라인 SVG를 지원합니다
장점은 다음과 같습니다.

• 확장 가능

• 텍스트 편집기를 통해 생성 및 수정 가능

• 검색, 색인 생성, 스크립트 작성 또는 압축 가능

• 높은 해상도로 인쇄 가능 어떤 해상도에서도 품질

• 이미지 품질 손실 없이 확대 가능

canvas는 js 동적 Drawing이고 svg는 설명하기 위한 XML 문서입니다. Drawing
svg-icon URL: Portal
svg Drawing

을 사용하여 svg

를 만드는 방법을 살펴보겠습니다.

는 캔버스와 비슷합니다. 먼저 html 문서에서

<svg width=300 height=300></svg>

태그를 지정할 수도 있습니다. 너비와 높이 속성
(캔버스와 svg가 너비와 높이를 지정하지 않으면 기본값은 300×150입니다)
하지만 있습니다. 또 다른 방법 사용된 양식(viewbox 속성)에 대해서는 내 다른 기사인 Portal을 읽을 수 있습니다
다음 그래픽 그림은 캔버스와 매우 유사하므로 더 설명하겠습니다

차이점은 양식으로 작성된다는 것입니다. svg 태그

내부에서 svg의 CSS 스타일에 대한 너비와 높이를 지정하면

기본 그래픽 그리기

직선

<svg width=300 height=300>
    <line x1=100 y1=100 x2=200 y2=200></line></svg>

x1,y1 시작 좌표

x2, y2 끝점 좌표

또한

line {    stroke: #000;}

를 그리려면 CSS 스타일을 지정해야 합니다(스타일 속성은 캔버스 환경 개체의 속성을 참조함). )

직사각형

<svg width=300 height=300>
    <rect x=100 y=100 width=100 height=100 rx=10 ry=10></rect></svg>

x,y 직사각형 시작 좌표

너비, 높이 직사각형 너비 및 높이

rx,ry 직사각형 둥근 모서리fill: #000;

rect {    stroke: #000;    fill: transparent;}

참고 직사각형에는 기본 스타일이 있습니다

다음은 동일합니다

원

<svg width=300 height=300>
    <circle r=100 cx=150 cy=150></circle></svg>

r 반경

cx,cy 원 중심 좌표

circle {    stroke: #000;    fill: transparent;}

Ellipse

<svg width=300 height=300>
    <ellipse rx=100 ry=60 cx=150 cy=150></ellipse></svg>

rx,ry 긴 반경/짧은 반경

cx,cy 원 중심 좌표

circle {    stroke: #000;    fill: transparent;}

Polyline

<svg width=300 height=300>
    <polyline points="100 100, 100 150, 150 150, 150 200, 200 200"></polyline></svg>

points는 폴리라인이 통과하는 점을 지정합니다

가로 및 세로 좌표는 공백으로 구분됩니다

여러 좌표 쉼표로 구분됩니다

polyline {    stroke: #000;    fill: transparent;}

Polygon

<svg width=300 height=300>
    <polygon points="100 100, 100 150, 150 150, 150 200, 200 200"></polygon></svg>

는 끝점이 시작점에 연결된다는 점을 제외하면 위의 폴리라인
과 유사합니다

닫힌 효과 형성

캔버스의 closePath()와 유사

polygon {    stroke: #000;    fill: transparent;}

Text

<svg width=300 height=300>
    <text x=100 y=100>hello world!</text></svg>

x,y 텍스트 시작 좌표(왼쪽 아래)

text {    font-size: 30px;}

경로 명령

경로는 경로 태그를 사용해야 합니다

d 속성이 있으며 지침을 추가하여 그림을 완성할 수 있습니다

위의 그리기 방법보다 훨씬 간단합니다

M/m 명령과 L/l 명령

<!-- M/L指令 --><svg width=300 height=300>
    <path d="M 100 100 L 200 200"></path></svg>

<!-- m/l指令 --><svg width=300 height=300>
    <path d="m 100 100 l 100 100"></path></svg>

이 두 명령에서 생성되는 경로는 동일합니다
M 명령은 시작점 좌표를 지정하는 캔버스의 moveTo()와 동일
L 명령은 캔버스와 동일합니다. lineTo()는 중간/끝점 좌표를 지정합니다.
차이점은 M/L 명령이 절대 좌표( svg 좌표 원점을 기준으로 위치 지정)

m/l 명령은 상대 좌표인 반면(이전 점을 기준으로 위치 지정)

물론

path {    stroke: #000;}

H/h 명령과 V/v 명령

이 두 명령은 수평 작화와 수직 작화를 실행하는 데 사용됩니다

마찬가지로 H와 V는 절대 명령입니다. v는 상대 명령입니다.

<svg width=300 height=300>
    <path d="M 100 100 H 200 V 200"></path></svg>

는 기본 채우기 스타일을 사용하여

<svg width=300 height=300>
    <path d="M 100 100 h 100 v 100"></path></svg>

와 동일하며 투명

path {    stroke: #000;    fill: transparent;}

으로 수정되었습니다. 경로 원점을 지정합니다. 100,100

그런 다음 수평으로 오른쪽으로 100px, 수직으로 100px 이동합니다

Z/z 명령

z와 Z 명령 사이에는 차이가 없습니다
선 세그먼트 이후 그려진 후 z 명령
을 추가하면 시작점과 끝점이 연결되고 닫힌 곡선

은 캔버스의 closePath()와 유사합니다

<svg width=300 height=300>
    <path d="M 100 100 h 100 v 100 Z"></path></svg>

path {    stroke: #000;    fill: transparent;}

A/a 명령

A/a 명령은 호를 그리는 데 사용되며 7개의 매개변수가 있습니다
캔버스 그리기 방법과 다르며 더 강력하고 복잡합니다
우선 살펴보세요 7개 매개변수

rx, ry, x축 회전, 대형 원호 플래그, 스윕 플래그, x, y

rx,ry 表示绘制圆弧的x轴半径和y轴半径
x-axis-rotation 表示圆弧相对x轴的旋转角度，默认顺时针，可以是负值
large-arc-flag 表示圆弧路径是大圆弧还是小圆弧（1大圆弧、0小圆弧）
sweep-flag 表示起点到终点是顺时针还是逆时针（1顺时针、0逆时针）
x,y 终点坐标（A命令绝对坐标、a命令相对坐标）

只是看这些可能不好理解我来举个例子给大家解释一下
其实只要把这个圆弧看成是椭圆的一部分就好理解了

<svg width=300 height=300>
    <path d="M 100 100 A 100 50 90 1 1 200 200"></path></svg>

path {    stroke: #000;    fill: transparent;}

这个例子中弧的起点是100,100
终点是200,200这个不难理解
A指令中前两个参数 100 50
就相当于我先画了一个100×50的椭圆
第三个参数90
便是将这个椭圆顺时针旋转90°
根据起点与终点
此时椭圆可以拆分为一个短路径和一个长路径
第四个参数1
便是表示选取较长的路径作为弧
第五个参数1
表示路径的方向为顺时针

贝塞尔曲线指令Q/T、C/S

二次贝塞尔曲线指令
Q x1 y1 ,  x y
T x y
三次贝塞尔曲线指令
C x1 y1 ,  x2 y2 , x y
S x2 y2 ,  x y

---

Q命令绘制到（x,y）的二次贝塞尔曲线，（x1,y1）为控制点

T命令绘制到（x,y）的二次贝塞尔曲线，控制点是前一个Q命令控制点的中心对称点
如果没有前一条曲线，当前点会被用作控制点。绘制出来的曲线更流畅

C命令绘制到（x,y）的三次贝塞尔曲线，（x1,y1）（x2,y2）为控制点

S命令绘制到（x,y）的三次贝塞尔曲线，（x2,y2）为新端点的控制点
第一个控制点是前一个C命令控制点的中心对称点
如果没有前一条曲线，当前点会被用作控制点。绘制出来的曲线更流畅

<svg width=300 height=300>
    <path d="M 100 100 Q 200 100 200 200"></path></svg>

path {    stroke: #000;    fill: transparent;}

关于贝塞尔曲线的数学解释我在canvas写过了
这里就不再说了 → 传送门

SVG样式属性

关于svg的css样式属性
类比于canvas中环境对象的属性
它们含义都是类似的，不多做解释了

• fill

• stroke

• stroke-width

• stroke/fill-opacity

• stroke-linecap

• stroke-linejoin

==主页传送门==

SVG（Scalable Vector Graphics）可缩放矢量图形
用于描述二维矢量图形的一种图形格式
很早之前SVG就出现了
相比于canvas，它更适合作一些小图标icon等等
HTML5支持内联SVG
它的优点如下：

• 可伸缩

• 可通过文本编辑器创建和修改

• 可被搜索、索引、脚本化或压缩

• 可在任何的分辨率下被高质量地打印

• 可在图像质量不下降的情况下被放大

canvas是js动态绘图，而svg是XML文档来描述绘图
svg-icon网址：传送门
下面我们来看一下如何使用svg绘图

创建svg

和canvas类似，首先需要在html文档中创建标签

<svg width=300 height=300></svg>

也可以指定width与height属性
（canvas与svg如果不指定宽高，默认300×150）
不过它还有另外一种使用的形式（viewbox属性），可以看看我的另一篇文章：传送门
接下来的图形绘制和canvas很像了，就多解释了
区别是以XML标签的形式写在svg标签内部
而且为svg的css样式指定宽高不会使它等比缩放

基本图形绘制

直线

<svg width=300 height=300>
    <line x1=100 y1=100 x2=200 y2=200></line></svg>

x1,y1 起始坐标
x2,y2 终点坐标

还需要指定css样式才能够画出来

line {    stroke: #000;}

（样式属性参考canvas环境对象中的属性）

矩形

<svg width=300 height=300>
    <rect x=100 y=100 width=100 height=100 rx=10 ry=10></rect></svg>

x,y  矩形起始坐标
width,height 矩形宽高
rx,ry 矩形圆角

rect {    stroke: #000;    fill: transparent;}

这里要注意矩形有默认的样式 fill: #000;
下面的也都一样

圆形

<svg width=300 height=300>
    <circle r=100 cx=150 cy=150></circle></svg>

r 半径
cx,cy 圆心坐标

circle {    stroke: #000;    fill: transparent;}

椭圆

<svg width=300 height=300>
    <ellipse rx=100 ry=60 cx=150 cy=150></ellipse></svg>

rx,ry 长半径/短半径
cx,cy 圆心坐标

circle {    stroke: #000;    fill: transparent;}

折线

<svg width=300 height=300>
    <polyline points="100 100, 100 150, 150 150, 150 200, 200 200"></polyline></svg>

points指定折线经过的点
横纵坐标空格隔开
多个坐标间逗号隔开

polyline {    stroke: #000;    fill: transparent;}

多边形

<svg width=300 height=300>
    <polygon points="100 100, 100 150, 150 150, 150 200, 200 200"></polygon></svg>

和上面的折线差不多
只不过它的终点会连接起点
形成闭合的效果
类似于canvas中的closePath()

polygon {    stroke: #000;    fill: transparent;}

文本

<svg width=300 height=300>
    <text x=100 y=100>hello world!</text></svg>

x,y 文本起始坐标（左下）

text {    font-size: 30px;}

路径命令

路径需要用path标签
它有一个属性d，我们可以添加指令来完成绘图
这要比我们上面的绘制方法简洁许多

M/m命令与L/l命令

<!-- M/L指令 --><svg width=300 height=300>
    <path d="M 100 100 L 200 200"></path></svg>

<!-- m/l指令 --><svg width=300 height=300>
    <path d="m 100 100 l 100 100"></path></svg>

在这两个指令中，产生的路径是一样的
M指令相当于canvas中的moveTo()指定起始点坐标
L指令相当于canvas中的lineTo()指定中/终点坐标
区别是，M/L指令是绝对坐标（相对于svg坐标原点定位）
而m/l指令是相对坐标（相对于上一个点定位）
当然还需要添加css样式才可以绘制

path {    stroke: #000;}

H/h命令与V/v命令

这两个指令用来执行水平绘制与垂直绘制
同样H与V是绝对指令，h与v是相对指令

<svg width=300 height=300>
    <path d="M 100 100 H 200 V 200"></path></svg>

等价于

<svg width=300 height=300>
    <path d="M 100 100 h 100 v 100"></path></svg>

有默认fill样式，修改为透明

path {    stroke: #000;    fill: transparent;}

指定了路径原点100,100
然后水平向右移动了100px，又垂直向下移动了100px

Z/z命令

z与Z命令没有任何区别
线段绘制完毕后，添加z命令
会连接起点与终点，闭合曲线
类似于canvas中的closePath()

<svg width=300 height=300>
    <path d="M 100 100 h 100 v 100 Z"></path></svg>

path {    stroke: #000;    fill: transparent;}

A/a命令

A/a命令用来绘制弧，它有7个参数
与canvas绘制方式不同，它更强大并且复杂
首先看看这7个参数
rx、ry、x-axis-rotation、large-arc-flag、sweep-flag、x、y

rx,ry 表示绘制圆弧的x轴半径和y轴半径
x-axis-rotation 表示圆弧相对x轴的旋转角度，默认顺时针，可以是负值
large-arc-flag 表示圆弧路径是大圆弧还是小圆弧（1大圆弧、0小圆弧）
sweep-flag 表示起点到终点是顺时针还是逆时针（1顺时针、0逆时针）
x,y 终点坐标（A命令绝对坐标、a命令相对坐标）

只是看这些可能不好理解我来举个例子给大家解释一下
其实只要把这个圆弧看成是椭圆的一部分就好理解了

<svg width=300 height=300>
    <path d="M 100 100 A 100 50 90 1 1 200 200"></path></svg>

path {    stroke: #000;    fill: transparent;}

这个例子中弧的起点是100,100
终点是200,200这个不难理解
A指令中前两个参数 100 50
就相当于我先画了一个100×50的椭圆
第三个参数90
便是将这个椭圆顺时针旋转90°
根据起点与终点
此时椭圆可以拆分为一个短路径和一个长路径
第四个参数1
便是表示选取较长的路径作为弧
第五个参数1
表示路径的方向为顺时针

贝塞尔曲线指令Q/T、C/S

二次贝塞尔曲线指令
Q x1 y1 ,  x y
T x y
三次贝塞尔曲线指令
C x1 y1 ,  x2 y2 , x y
S x2 y2 ,  x y

---

Q命令绘制到（x,y）的二次贝塞尔曲线，（x1,y1）为控制点

T命令绘制到（x,y）的二次贝塞尔曲线，控制点是前一个Q命令控制点的中心对称点
如果没有前一条曲线，当前点会被用作控制点。绘制出来的曲线更流畅

C命令绘制到（x,y）的三次贝塞尔曲线，（x1,y1）（x2,y2）为控制点

S命令绘制到（x,y）的三次贝塞尔曲线，（x2,y2）为新端点的控制点
第一个控制点是前一个C命令控制点的中心对称点
如果没有前一条曲线，当前点会被用作控制点。绘制出来的曲线更流畅

<svg width=300 height=300>
    <path d="M 100 100 Q 200 100 200 200"></path></svg>

path {    stroke: #000;    fill: transparent;}

关于贝塞尔曲线的数学解释我在canvas写过了
这里就不再说了 → 传送门

SVG样式属性

关于svg的css样式属性
类比于canvas中环境对象的属性
它们含义都是类似的，不多做解释了

• fill

• stroke

• stroke-width

• stroke/fill-opacity

• stroke-linecap

• stroke-linejoin

 以上就是SVG（可缩放矢量图形）基本图形绘制方法与path路径命令的内容，更多相关内容请关注PHP中文网（www.php.cn）！