SVG 底子形状

by admin on 2019年12月4日

聊聊 SVG 基本形状转换那些事

2017/01/20 · HTML5 ·
SVG

原文出处:
凹凸实验室   

图片 1

前面的话

  图形分为位图和矢量图。位图是基于颜色的描述,是由像素点组成的图像;而矢量图是基于数学矢量的描述,是由几何图元组成的图像,与分辨率无关。可缩放矢量图形,即SVG,是W3C
XML的分支语言之一,用于标记可缩放的矢量图形。本文将详细介绍SVG基本形状及样式设置

 

SVG 形状

SVG 有一些预定义的形状元素,可被开发者使用和操作:

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>

SVG有一些预定义的形状元素,可被开发者使用和操作:

一、前言

前段时间研究 SVG 压缩优化,发现SVG预定义的
rectcircleellipselinepolylinepolygon
六种基本形状可通过path路径转换实现,这样可以在一定程度上减少代码量。不仅如此,我们常用的
SVG Path
动画(路径动画),是以操作path中两个属性值stroke-dasharraystroke-dashoffset来实现,基本形状转换为path路径,有利于实现路径动画。

概述

  SVG是XML语言的一种形式,有点类似XHTML,它可以用来绘制矢量图形,可以通过定义必要的线和形状来创建一个图形,也可以修改已有的位图,或者将这两种方式结合起来创建图形

  [注意]IE8-浏览器不兼容

  SVG提供了一些元素,用于定义圆形、矩形、简单或复杂的曲线,以及其他形状。一个简单的SVG文档由<svg>根元素和基本的形状元素构成。另外还有一个g元素,它用来把若干个基本形状编成一个组

  从这些开始,SVG可以成为任何复杂的组合图形。SVG支持渐变、旋转、滤镜效果、JavaScript接口等等功能,但是所有这些额外的语言特性,都需要在一个定义好的图形区域内实现

【入门】

  下面直接从一个简单的例子开始介绍

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="red" />
  <circle cx="150" cy="100" r="80" fill="green" />
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg> 

  效果如下所示

  上面实例的绘制流程包括以下几步

  1、从svg根元素开始

  2、绘制一个完全覆盖图像区域的矩形 <rect>,把背景颜色设为红色

  3、一个半径80px的绿色圆圈<circle>绘制在红色矩形的正中央
(向右偏移150px,向下偏移100px)

  4、绘制文字“SVG”。文字被填充为白色,
通过设置居中的锚点把文字定位到期望的位置

 

矩形

<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;
 stroke:rgb(0,0,0)"/>
  • rect元素的widthheight 属性可定义矩形的高度和宽度
  • style 属性用来定义 CSS 属性
  • CSS 的 fill 属性定义矩形的填充颜色(rgb
    值、颜色名或者十六进制值)
  • CSS 的 stroke-width 属性定义矩形边框的宽度
  • CSS 的 stroke 属性定义矩形边框的颜色

  • x 属性定义矩形的左侧位置(例如,x="0"
    定义矩形到浏览器窗口左侧的距离是 0px

  • y 属性定义矩形的顶端位置(例如,y="0"
    定义矩形到浏览器窗口顶端的距离是 0px
  • CSS 的 fill-opacity
    属性定义填充颜色透明度(合法的范围是:0 - 1
  • CSS 的 stroke-opacity
    属性定义笔触颜色的透明度(合法的范围是:0 - 1

  • CSS 的opacity 属性定义整个元素的透明值(合法的范围是:0 - 1

  • rxry 属性可使矩形产生圆角。

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>

二、SVG基本形状

SVG
提供了rectcircleellipselinepolylinepolygon六种基本形状用于图形绘制,这些形状可以直接用来绘制一些基本的形状,如矩形、椭圆等,而复杂图形的绘制则需要使用
path 路径来实现。

图片 2

引入

  SVG包括以下几种使用方式:

  1、使用img、frame、object、embed标签引用,或使用CSS背景图片

<iframe src="image.svg"></iframe>

<img src="image.svg">

<div style="background:url('image.svg') no-repeat;width:100px;height:100px;"></div>

  2、浏览器直接打开SVG文件

  SVG有以下两种文件类型

  a、普通SVG文件是包含SVG标记的简单文本文件。推荐使用“.svg”(全部小写)作为此类文件的扩展名

  b、由于在某些应用(比如地图应用等)中使用时,SVG文件可能会很大,SVG标准同样允许gzip压缩的SVG文件。推荐使用“.svgz”(全部小写)作为此类文件扩展名 

  SVG文件的完整结构如下所示

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

  第一行包含了 XML 声明,包含version和standalone这两个属性

version表示使用1.0版本的XML
standalone属性规定该文件是否是“独立的”。standalone="no" 意味着会引用一个外部文件,在这里是DTD文件

  第二行引用了这个外部的 SVG DTD。该 DTD 位于
“ DTD 位于
W3C,含有所有允许的 SVG 元素

  [注意]因为基于SVG的DTD验证导致的问题比它能解决的问题更多,所以应舍弃来自
(X)HTML的doctype声明

  第三行开始是SVG代码,包括开始标签 <svg> 和关闭标签
</svg> 。这是根元素

width和height属性设置SVG文档的宽度和高度
version属性定义所使用的SVG版本
xmlns属性定义SVG命名空间

  因此,SVG的基本框架如下

<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

  3、使用SVG标签

<div>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <circle cx="100" cy="100" r="40"></circle>
    </svg>
</div>

  在HTML文件中使用SVG标签,或者浏览器直接打开SVG文件时,有一些语法特性需要注意

  a、SVG的元素和属性必须按标准格式书写

  b、SVG里的属性值必须用引号引起来,就算是数值也必须这样做

 

椭圆

 <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/>
  • cx 属性定义圆点的 x 坐标
  • cy 属性定义圆点的 y 坐标
  • rx 属性定义水平半径
  • ry 属性定义垂直半径

矩形 <rect>

x:矩形的左侧位置(例如,x=”0″ 定义矩形到浏览器窗口左侧的距离是 0px)
y:矩形的顶端位置(例如,y=”0″ 定义矩形到浏览器窗口顶端的距离是 0px)
rx 和 ry:使矩形产生圆角。
width 和 height :定义矩形的高度和宽度
style:CSS 属性
CSS 的 fill:矩形的填充颜色(rgb 值、颜色名或者十六进制值)
CSS 的 stroke-width:矩形边框的宽度
CSS 的 stroke:矩形边框的颜色
CSS 的 fill-opacity:填充颜色透明度(合法的范围是:0 – 1)
CSS 的 stroke-opacity:笔触颜色的透明度(合法的范围是:0 – 1)
CSS opacity:元素的透明值 (范围: 0 到 1)。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="200" height="130"
  style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1;
  stroke-opacity:0.9"/>
</svg>

1.rect 矩形

XHTML

<rect x=”10″ y=”10″ width=”30″ height=”30″/> <rect x=”60″
y=”10″ rx=”10″ ry=”10″ width=”30″ height=”30″/>

1
2
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

SVG中rect元素用于绘制矩形、圆角矩形,含有6个基本属性用于控制矩形的形状以及坐标,具体如下:

x 矩形左上角x位置, 默认值为 0 y 矩形左上角y位置, 默认值为 0 width
矩形的宽度, 不能为负值否则报错, 0 值不绘制 height 矩形的高度,
不能为负值否则报错, 0 值不绘制 rx 圆角x方向半径, 不能为负值否则报错 ry
圆角y方向半径, 不能为负值否则报错

1
2
3
4
5
6
x 矩形左上角x位置, 默认值为 0
y 矩形左上角y位置, 默认值为 0
width 矩形的宽度, 不能为负值否则报错, 0 值不绘制
height 矩形的高度, 不能为负值否则报错, 0 值不绘制
rx 圆角x方向半径, 不能为负值否则报错
ry 圆角y方向半径, 不能为负值否则报错

这里需要注意,rxry 的还有如下规则:

  • rxry 都没有设置, 则 rx = 0 ry = 0
  • rxry 有一个值为0, 则相当于 rx = 0 ry = 0,圆角无效
  • rxry 有一个被设置, 则全部取这个被设置的值
  • rx 的最大值为 width 的一半, ry 的最大值为 height 的一半
JavaScript

rx = rx || ry || 0; ry = ry || rx || 0;   rx = rx &gt; width / 2 ?
width / 2 : rx; ry = ry &gt; height / 2 ? height / 2 : ry;   if(0
=== rx || 0 === ry){ rx = 0, ry = 0;
//圆角不生效,等同于,rx,ry都为0 }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f49eccc27a188181481-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f49eccc27a188181481-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f49eccc27a188181481-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f49eccc27a188181481-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f49eccc27a188181481-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f49eccc27a188181481-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f49eccc27a188181481-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f49eccc27a188181481-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f49eccc27a188181481-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f49eccc27a188181481-10">
10
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f49eccc27a188181481-1" class="crayon-line">
rx = rx || ry || 0;
</div>
<div id="crayon-5b8f49eccc27a188181481-2" class="crayon-line crayon-striped-line">
ry = ry || rx || 0;
</div>
<div id="crayon-5b8f49eccc27a188181481-3" class="crayon-line">
 
</div>
<div id="crayon-5b8f49eccc27a188181481-4" class="crayon-line crayon-striped-line">
rx = rx &gt; width / 2 ? width / 2 : rx;
</div>
<div id="crayon-5b8f49eccc27a188181481-5" class="crayon-line">
ry = ry &gt; height / 2 ? height / 2 : ry;
</div>
<div id="crayon-5b8f49eccc27a188181481-6" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f49eccc27a188181481-7" class="crayon-line">
if(0 === rx || 0 === ry){
</div>
<div id="crayon-5b8f49eccc27a188181481-8" class="crayon-line crayon-striped-line">
rx = 0,
</div>
<div id="crayon-5b8f49eccc27a188181481-9" class="crayon-line">
ry = 0; //圆角不生效,等同于,rx,ry都为0
</div>
<div id="crayon-5b8f49eccc27a188181481-10" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

基本形状

  下面介绍的几个基本的形状用于大多数的SVG绘图。通过这些形状的命名可以知道其用途。给它们一些属性可以确定它们的位置和大小

  要想插入一个形状,可以在文档中创建一个元素。不同的元素对应着不同的形状,并且使用不同的属性来定义图形的大小和位置。有一些形状因为可以由其他的形状创建而略显冗余, 但是它们用起来方便,可让SVG文档简洁易懂

【矩形】

rect元素会在屏幕上绘制一个矩形 。其实只要6个基本属性就可以控制它在屏幕上的位置和形状

图片 3

x 矩形左上角的x位置
y 矩形左上角的y位置
width 矩形的宽度
height 矩形的高度
rx 圆角的x方位的半径
ry 圆角的y方位的半径

  [注意]如果只设置rx或ry任意一个,则另一个将默认相等

  如果没有设置圆角,则默认为0

<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

【圆形】

circle元素会在屏幕上绘制一个圆形。它只有3个属性用来设置圆形

r 圆的半径
cx 圆心的x位置
cy 圆心的y位置

图片 4

<circle cx="25" cy="25" r="20"/>

【椭圆】

   椭圆Ellipse是circle元素更通用的形式,可以分别缩放圆的x半径和y半径(通常数学家称之为长轴半径和短轴半径)

rx 椭圆的x半径
ry 椭圆的y半径
cx 椭圆中心的x位置
cy 椭圆中心的y位置

图片 5

<ellipse cx="25" cy="25" rx="25" ry="15"/>

【线条】

  线条Line 绘制直线。它取两个点的位置作为属性,指定这条线的起点和终点位置

  [注意]line相当于只设置路径,需要设置stroke属性可以显示出线条

x1 起点的x位置
y1 起点的y位置
x2 终点的x位置
y2 终点的y位置

图片 6

<line x1="10" y1="5" x2="30"  y2="50" stroke="#000" />

【折线】

  折线Polyline是一组连接在一起的直线。它可以有很多的点,折线的所有点位置都放在一个points属性中

  [注意]如果不将polyline的fill设置为透明,将会呈现多边形的效果

points 点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开

  每个点必须包含2个数字,一个是x坐标,一个是y坐标。所以点列表 (0,0),
(1,1) 和(2,2)可以写成这样:“0 0, 1 1, 2 2”

图片 7

<polyline points="0 0, 20 30, 10 60" fill="transparent" stroke="black"/>

【多边形】

  多边形polygon和折线很像,它们都是由连接一组点集的直线构成。不同的是,polygon的路径在最后一个点处自动回到第一个点。矩形也是一种多边形,如果需要更多灵活性,也可以用多边形创建一个矩形

points 点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。

  每个点必须包含2个数字,一个是x坐标,一个是y坐标。所以点列表 (0,0),
(1,1) 和(2,2)可以写成这样:“0 0, 1 1, 2
2”。路径绘制完后闭合图形,所以最终的直线将从位置(2,2)连接到位置(0,0)

图片 8

<polygon points="0 0, 20 30, 10 60"/>

 

线

 <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
  • x1 属性在 x 轴定义线条的开始
  • y1 属性在 y轴定义线条的开始
  • x2 属性在 x 轴定义线条的结束
  • y2 属性在 y 轴定义线条的结束

圆形 <circle>

cx和cy:圆点的x和y坐标
=> 如果省略cx和cy,圆的中心会被设置为(0, 0)
r:圆的半径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

2.circle 圆形

XHTML

<circle cx=”100″ cy=”100″ r=”50″ fill=”#fff”></circle>

1
<circle cx="100" cy="100" r="50" fill="#fff"></circle>

SVG中circle元素用于绘制圆形,含有3个基本属性用于控制圆形的坐标以及半径,具体如下:

r 半径 cx 圆心x位置, 默认为 0 cy 圆心y位置, 默认为 0

1
2
3
r 半径
cx 圆心x位置, 默认为 0
cy 圆心y位置, 默认为 0

填充和描边

  与canvas类似,svg进行样式设置的属性主要是填充fill和描边stroke

  多数基本的涂色可以通过在元素上设置两个属性来搞定:fill属性和stroke属性。fill属性设置对象内部的颜色,stroke属性设置绘制对象线条的颜色

<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
       fill-opacity="0.5" stroke-opacity="0.8"/>

【透明度】

  可以使用opacity来定义图形的整体透明度。而在SVG中可以分别定义填充色和边框色的不透明度,属性fill-opacity控制填充色的不透明度,属性stroke-opacity控制描边的不透明度

  将描边设置为0.5的透明度,可实现双色描边的效果

<svg height="100"  version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <circle cx="50" cy="50" r="40" fill="blue"/>
  <circle cx="50" cy="50" r="30" fill="red" stroke-width="20" stroke-opacity="0.5" stroke="yellow"/>
</svg>

  除了颜色和透明度设置,还有其他一些属性用来控制绘制描边的方式

stroke-width属性定义了描边的宽度。注意,描边是以路径为中心线绘制的,在上面的例子里,路径是粉红色的,描边是黑色的。路径的每一侧都有均匀分布的描边

  第二个影响描边的属性是stroke-linecap属性,它控制边框终点的形状,有三种可能值

  1、butt用直边结束线段,它是常规做法,线段边界90度垂直于描边的方向、贯穿它的终点

  2、square的效果差不多,但是会稍微超出实际路径的范围,超出的大小由stroke-width控制

  3、round表示边框的终点是圆角,圆角的半径也是由stroke-width控制的

图片 9

  还有一个stroke-linejoin属性,用来控制两条描边线段之间,用什么方式连接

  每条折线都是由两个线段连接起来的,连接处的样式由stroke-linejoin属性控制,它有三个可用的值

  1、miter是默认值,表示用方形画笔在连接处形成尖角

  2、round表示用圆角连接,实现平滑效果

  3、bevel表示连接处会形成一个斜接

图片 10

  最后,可以通过指定stroke-dasharray属性,将虚线类型应用在描边上

stroke-dasharray属性的参数,是一组用逗号分割的数字组成的数列。这里的数字必须用逗号分割(空格会被忽略)。每一组数字,第一个用来表示填色区域的长度,第二个用来表示非填色区域的长度

图片 11

<path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
<path d="M 10 75 L 190 75" stroke="red"
    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>

  上面的例子中,第二个路径会先做5个像素单位的填色,紧接着是5个空白单位,然后又是5个单位的填色。如果想要更复杂的虚线模式,可以定义更多的数字

  第一个例子指定了3个数字,这种情况下,数字会循环两次,形成一个偶数的虚线模式(奇数个循环两次变偶数个)。所以该路径首先渲染5个填色单位,10个空白单位,5个填色单位,然后回头以这3个数字做一次循环,但是这次是创建5个空白单位,10个填色单位,5个空白单位。通过这两次循环得到偶数模式,并将这个偶数模式不断重复

  另外还有一些关于填充和描边的属性,如下所示

  1、fill-rule,用于定义如何给图形重叠的区域上色

  2、stroke-miterlimit,定义什么情况下绘制或不绘制边框连接的miter效果

 

多边形

<polygon> 标签用来创建含有不少于三个边的图形。

 <polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/>
  • points属性定义多边形每个角的 xy坐标

椭圆 <ellipse>

CX:椭圆中心的x坐标
CY:椭圆中心的y坐标
RX:水平半径
RY:垂直半径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

3.ellipse 椭圆

XHTML

<ellipse cx=”75″ cy=”75″ rx=”20″ ry=”5″/>

1
<ellipse cx="75" cy="75" rx="20" ry="5"/>

SVG中ellipse元素用于绘制椭圆,是circle元素更通用的形式,含有4个基本属性用于控制椭圆的形状以及坐标,具体如下:

rx 椭圆x半径 ry 椭圆y半径 cx 圆心x位置, 默认为 0 cy 圆心y位置, 默认为 0

1
2
3
4
rx 椭圆x半径
ry 椭圆y半径
cx 圆心x位置, 默认为 0
cy 圆心y位置, 默认为 0

CSS

  可以通过CSS来样式化填充描边。语法和在html里使用CSS一样,只不过要把background-colorborder改成fillstroke

  不是所有的属性都能用CSS来设置。上色和填充的部分一般是可以用CSS来设置的,比如fillstrokestroke-dasharray等,但是不包括下面会提到的渐变和图案等功能。另外,widthheight,以及路径的命令等等,都不能用css设置。判断它们能不能用CSS设置还是比较容易的

【行间样式】

  CSS可以利用style属性插入到元素的行间

<svg version="1.1" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40"  style="stroke: black; fill: transparent;stroke-width:5"></circle>
  <circle cx="50" cy="50" r="30"  style="stroke: black; fill: transparent;stroke-width:5"></circle>
  <circle cx="50" cy="50" r="20"  style="stroke: black; fill: transparent;stroke-width:5"></circle>
  <circle cx="50" cy="50" r="10" style="stroke: black; fill: transparent;stroke-width:5"></circle>
</svg>

【内部样式】

  利用<style>设置一段样式段落。就像在html里这样的<style>一般放在<head>里,在svg里可以直接放置<style>标签

  下面利用CSS来实现hover效果

<svg version="1.1" height="100" xmlns="http://www.w3.org/2000/svg">
  <style>
     circle{stroke: black; fill: transparent;stroke-width:5;}
     circle:hover{stroke:red;}
  </style>
  <circle cx="50" cy="50" r="40"></circle>
  <circle cx="50" cy="50" r="30"></circle>
  <circle cx="50" cy="50" r="20"></circle>
  <circle cx="50" cy="50" r="10"></circle>
</svg>

【外部样式】

  当然,也可以定义一个外部的样式表,这种情况只适合SVG文件,不适合在HTML文档中引入的SVG标签

  [注意]在HTML文档的样式表中,只能设置SVG的样式,不能设置SVG里面的circle等形状的样式

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="40"></circle>
  <circle cx="100" cy="100" r="30"></circle>
  <circle cx="100" cy="100" r="20"></circle>
  <circle cx="100" cy="100" r="10"></circle>
</svg>

  style.css看起来就像这样

circle{stroke: black; fill: transparent;stroke-width:5;}
circle:hover{stroke:red;}

  

折线

 <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>

直线 <line>

x1:在 x 轴定义线条的开始
y1:在 y 轴定义线条的开始
x2:在 x 轴定义线条的结束
y2:在 y 轴定义线条的结束

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

4.line 直线

XHTML

<line x1=”10″ x2=”50″ y1=”110″ y2=”150″/>

1
<line x1="10" x2="50" y1="110" y2="150"/>

Line绘制直线。它取两个点的位置作为属性,指定这条线的起点和终点位置。

x1 起点的x位置 y1 起点的y位置 x2 终点的x位置 y2 终点的y位置

1
2
3
4
x1 起点的x位置
y1 起点的y位置
x2 终点的x位置
y2 终点的y位置

路径

SVG中的路径概念可以是一个形状的外框,也可以是用来裁剪的线条,这个线条可以被描边,封闭时还可以被填充。

路径和折线或多边形不同之处在于,路径可以是直线也可以曲线,因此使用路径可以构造更为复杂的几何图形。

path 标签用来创建一条路径,路径元素的基本属性是路径数据,用
d='path data'语法来定义。路径数据中包含了点集和绘制指令。

点集就是一组“x y”格式的坐标,以空格隔开,以指令字母开头。指令可以有如下几种:
M = moveto移动到某坐标位置
L = lineto直线连线
H = horizontal lineto水平连线
V = vertical lineto垂直连线
C = curveto 曲线连接
S = smooth curveto平滑曲线连接
Q = quadratic Belzier curve二次贝塞尔曲线连接
T = smooth quadratic Belzier curveto平滑二次贝塞尔曲线连接
A = elliptical Arc 椭圆弧连接
Z = closepath关闭路径

以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

 <path d="M250 150 L150 350 L350 350 Z" />

定义了一条路径,它开始于位置 250 150,到达位置
150 350,然后从那里开始到 350 350,最后在250 150 关闭路径。

多边形 <polygon>

<polygon>
标签用来创建含有不少于三个边的图形。是由直线组成,其形状是”封闭”的(所有的线条
连接起来)。
points:多边形每个角的 x 和 y 坐标
fill-rule:填充方式,有nonzero和evenodd两种选项

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

5.polyline 折线

XHTML

<polyline points=”60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90
135, 95 150, 100 145″/>

1
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>

polyline是一组连接在一起的直线。因为它可以有很多的点,折线的的所有点位置都放在一个points属性中:

points
点集数列,每个数字用空白、逗号、终止命令符或者换行符分隔开,每个点必须包含2个数字,一个是x坐标,一个是y坐标
如0 0, 1 1, 2 2”

1
points 点集数列,每个数字用空白、逗号、终止命令符或者换行符分隔开,每个点必须包含2个数字,一个是x坐标,一个是y坐标 如0 0, 1 1, 2 2”

曲线 <polyline>

用于创建任何只有直线的形状:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" 
style="fill:white;stroke:red;stroke-width:4" />
</svg>

6.polygon 多边形

XHTML

<polygon points=”50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35
205, 40 190, 30 180, 45 180″/>

1
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>

polygon和折线很像,它们都是由连接一组点集的直线构成。不同的是,polygon的路径在最后一个点处自动回到第一个点。需要注意的是,矩形也是一种多边形,如果需要更多灵活性的话,你也可以用多边形创建一个矩形。

points
点集数列,每个数字用空白、逗号、终止命令符或者换行符分隔开,每个点必须包含2个数字,一个是x坐标,一个是y坐标
如0 0, 1 1, 2 2, 路径绘制完闭合图形”

1
points 点集数列,每个数字用空白、逗号、终止命令符或者换行符分隔开,每个点必须包含2个数字,一个是x坐标,一个是y坐标 如0 0, 1 1, 2 2, 路径绘制完闭合图形”

路径 <path>

用于定义一个路径。
下面的命令可用于路径数据:

  • 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

注意:以上所有命令均大小写敏感。大写表示绝对定位,小写表示相对定位。

d属性定义了路径描述。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

说明:它开始于位置(150,0),到达位置(75,200),然后从那里开始到(225,200),最后在(150,0)关闭路径。

Quadratic Bezier 曲线:

<path id="purple" d="M 100 400 q 200 -300 400 0" fill="none" 
stroke="purple" stroke-width="3" />

说明: q x1 y1 x y:小写的q,相对位置,从当前位置画曲线至相对坐标(x,
y),控制点为相对坐标(x1, y1)

三、SVG path 路径

SVG
的路径<path>功能非常强大,它不仅能创建基本形状,还能创建更多复杂的形状。<path>路径是由一些命令来控制的,每一个命令对应一个字母,并且区分大小写,大写主要表示绝对定位,小写表示相对定位。<path>
通过属性 d 来定义路径, d 是一系列命令的集合,主要有以下几个命令:

图片 12

通常大部分形状,都可以通过指令M(m)L(l)H(h)V(v)A(a)来实现,注意特别要区分大小写,相对与绝对坐标情况,转换时推荐使用相对路径可减少代码量,例如:

// 以下两个等价 d=’M 10 10 20 20′ // (10, 10) (20 20) 都是绝对坐标 d=’M
10 10 L 20 20′   // 以下两个等价 d=’m 10 10 20 20′ // (10, 10) 绝对坐标,
(20 20) 相对坐标 d=’M 10 10 l 20 20′

1
2
3
4
5
6
7
// 以下两个等价
d=’M 10 10 20 20′ // (10, 10) (20 20) 都是绝对坐标
d=’M 10 10 L 20 20′
 
// 以下两个等价
d=’m 10 10 20 20′ // (10, 10) 绝对坐标, (20 20) 相对坐标
d=’M 10 10 l 20 20′

文本 <text>

x,y:文本位置
fill:文本颜色
transform:文字旋转 transform="rotate(30 20,40)": rotate(a x,y)
基于点(x,y)进行角度a的旋转

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>

注意:该<text>可被包含在<a></a>标签以内

四、SVG 基本形状路径转换原理

线性渐变 <linearGradient>

1.rect to path

如下图所示,一个 rect 是由 4 个弧和 4 个线段构成;如果 rect 没有设置
rx 和 ry 则 rect 只是由 4 个线段构成。rect 转换为 path 只需要将 A
~ H 之间的弧和线段依次实现即可。

图片 13

JavaScript

function rect2path(x, y, width, height, rx, ry) { /* * rx 和 ry
的规则是: * 1. 如果其中一个设置为 0 则圆角不生效 * 2.
如果有一个没有设置则取值为另一个 */ rx = rx || ry || 0; ry = ry || rx
|| 0;   //非数值单位计算,如当宽度像100%则移除 if (isNaN(x – y + width –
height + rx – ry)) return;   rx = rx > width / 2 ? width / 2 : rx; ry
= ry > height / 2 ? height / 2 : ry;   //如果其中一个设置为 0
则圆角不生效 if(0 == rx || 0 == ry){ // var path = // ‘M’ + x + ‘ ‘ + y

  • // ‘H’ + (x + width) + 不推荐用绝对路径,相对路径节省代码量 // ‘V’ +
    (y + height) + // ‘H’ + x + // ‘z’; var path = ‘M’ + x + ‘ ‘ + y + ‘h’ +
    width + ‘v’ + height + ‘h’ + -width + ‘z’; }else{ var path = ‘M’ + x + ‘
    ‘ + (y+ry) + ‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 1 ‘ + rx + ‘ ‘ + (-ry) + ‘h’ +
    (width – rx – rx) + ‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 1 ‘ + rx + ‘ ‘ + ry +
    ‘v’ + (height – ry -ry) + ‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 1 ‘ + (-rx) + ‘ ‘
  • ry + ‘h’ + (rx + rx -width) + ‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 1 ‘ + (-rx)
  • ‘ ‘ + (-ry) + ‘z’; }   return path; }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function rect2path(x, y, width, height, rx, ry) {
/*
* rx 和 ry 的规则是:
* 1. 如果其中一个设置为 0 则圆角不生效
* 2. 如果有一个没有设置则取值为另一个
*/
rx = rx || ry || 0;
ry = ry || rx || 0;
 
//非数值单位计算,如当宽度像100%则移除
if (isNaN(x – y + width – height + rx – ry)) return;
 
rx = rx > width / 2 ? width / 2 : rx;
ry = ry > height / 2 ? height / 2 : ry;
 
//如果其中一个设置为 0 则圆角不生效
if(0 == rx || 0 == ry){
// var path =
// ‘M’ + x + ‘ ‘ + y +
// ‘H’ + (x + width) + 不推荐用绝对路径,相对路径节省代码量
// ‘V’ + (y + height) +
// ‘H’ + x +
// ‘z’;
var path =
‘M’ + x + ‘ ‘ + y +
‘h’ + width +
‘v’ + height +
‘h’ + -width +
‘z’;
}else{
var path =
‘M’ + x + ‘ ‘ + (y+ry) +
‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 1 ‘ + rx + ‘ ‘ + (-ry) +
‘h’ + (width – rx – rx) +
‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 1 ‘ + rx + ‘ ‘ + ry +
‘v’ + (height – ry -ry) +
‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 1 ‘ + (-rx) + ‘ ‘ + ry +
‘h’ + (rx + rx -width) +
‘a’ + rx + ‘ ‘ + ry + ‘ 0 0 1 ‘ + (-rx) + ‘ ‘ + (-ry) +
‘z’;
}
 
return path;
}

放射性渐变 <radialGradient>

2.circle/ellipse to path

圆可视为是一种特殊的椭圆,即 rx 与 ry 相等的椭圆,所以可以放在一起讨论。
椭圆可以看成A点到C做180度顺时针画弧、C点到A做180度顺时针画弧即可。

图片 14

JavaScript

function ellipse2path(cx, cy, rx, ry) {
//非数值单位计算,如当宽度像100%则移除 if (isNaN(cx – cy + rx – ry))
return;   var path = ‘M’ + (cx-rx) + ‘ ‘ + cy + ‘a’ + rx + ‘ ‘ + ry + ‘
0 1 0 ‘ + 2*rx + ‘ 0’ + ‘a’ + rx + ‘ ‘ + ry + ‘ 0 1 0 ‘ + (-2*rx) + ‘
0’ + ‘z’;   return path; }

1
2
3
4
5
6
7
8
9
10
11
12
function ellipse2path(cx, cy, rx, ry) {
//非数值单位计算,如当宽度像100%则移除
if (isNaN(cx – cy + rx – ry)) return;
 
var path =
‘M’ + (cx-rx) + ‘ ‘ + cy +
‘a’ + rx + ‘ ‘ + ry + ‘ 0 1 0 ‘ + 2*rx + ‘ 0’ +
‘a’ + rx + ‘ ‘ + ry + ‘ 0 1 0 ‘ + (-2*rx) + ‘ 0’ +
‘z’;
 
return path;
}

重要属性 stroke

  • stroke:颜色
  • stroke-width:宽度
  • stroke-linecap:线条端点形状butt / 无端点, round / 圆形,square /
    正方形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="10">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>```
![](http://upload-images.jianshu.io/upload_images/2662224-a2cae78a0d8d18db.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- stroke-dasharray:用于创建虚线

<svg xmlns=”” version=”1.1″>
<g fill=”none” stroke=”black” stroke-width=”4″>
<path stroke-dasharray=”5,5″ d=”M5 20 l215 0″ />
<path stroke-dasharray=”10,10″ d=”M5 40 l215 0″ />
<path stroke-dasharray=”20,10,5,5,5,10″ d=”M5 60 l215 0″ />
</g>
</svg>“`

图片 15

3.line to path

相对来说比较简单,如下:

JavaScript

function line2path(x1, y1, x2, y2) {
//非数值单位计算,如当宽度像100%则移除 if (isNaN(x1 – y1 + x2 – y2))
return;   x1 = x1 || 0; y1 = y1 || 0; x2 = x2 || 0; y2 = y2 || 0;   var
path = ‘M’ + x1 + ‘ ‘+ y1 + ‘L’ + x2 + ‘ ‘ + y2; return path; }

1
2
3
4
5
6
7
8
9
10
11
12
function line2path(x1, y1, x2, y2) {
//非数值单位计算,如当宽度像100%则移除
if (isNaN(x1 – y1 + x2 – y2)) return;
 
x1 = x1 || 0;
y1 = y1 || 0;
x2 = x2 || 0;
y2 = y2 || 0;
 
var path = ‘M’ + x1 + ‘ ‘+ y1 + ‘L’ + x2 + ‘ ‘ + y2;
return path;
}

4.polyline/polygon to path

polyline折线、polygon多边形的转换为path比较类似,差别就是polygon多边形会闭合。

JavaScript

// polygon折线转换 points = [x1, y1, x2, y2, x3, y3 …]; function
polyline2path (points) { var path = ‘M’ + points.slice(0,2).join(‘ ‘) +
‘L’ + points.slice(2).join(‘ ‘); return path; }   // polygon多边形转换
points = [x1, y1, x2, y2, x3, y3 …]; function polygon2path (points)
{ var path = ‘M’ + points.slice(0,2).join(‘ ‘) + ‘L’ +
points.slice(2).join(‘ ‘) + ‘z’; return path; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// polygon折线转换
points = [x1, y1, x2, y2, x3, y3 …];
function polyline2path (points) {
var path = ‘M’ + points.slice(0,2).join(‘ ‘) +
‘L’ + points.slice(2).join(‘ ‘);
return path;
}
 
// polygon多边形转换
points = [x1, y1, x2, y2, x3, y3 …];
function polygon2path (points) {
var path = ‘M’ + points.slice(0,2).join(‘ ‘) +
‘L’ + points.slice(2).join(‘ ‘) + ‘z’;
return path;
}

五、convertpath 转换工具

为了方便处理SVG基本元素路径转换,本人抽空写了convertpath工具,具体如下:

安装:

Shell

npm i convertpath

1
npm i convertpath

使用:

JavaScript

const parse = require(‘convertpath’); parse.parse(“./test/test.svg”)
/** * <circle cx=”500″ cy=”500″ r=”20″ fill=”red”/> */
console.log(parse.toSimpleSvg())   /** * <path
d=”M500,500,m-20,0,a20,20,0,1,0,40,0,a20,20,0,1,0,-40,0,Z”
fill=”red”/> */

1
2
3
4
5
6
7
8
9
10
const parse = require(‘convertpath’);
parse.parse("./test/test.svg")
/**
* <circle cx="500" cy="500" r="20" fill="red"/>
*/
console.log(parse.toSimpleSvg())
 
/**
* <path d="M500,500,m-20,0,a20,20,0,1,0,40,0,a20,20,0,1,0,-40,0,Z" fill="red"/>
*/

参考资料:

Basic Shapes – SVG 1.1 (Second
Edition)
基本形状 – SVG |
MDN
SVG (一) 图形, 路径, 变换总结; 以及椭圆弧线,
贝塞尔曲线的详细解释
路径 – SVG |
MDN
XMLDOM

1 赞 1 收藏
评论

图片 16

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图