SVG精髓-svg开发指南

本文主要是介绍SVG精髓-svg开发指南，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

SVG精髓目录

文章目录

前言
推荐阅读
1. 入门
- 1. 图形系统
- - 1. 栅格系统
  - 2. 矢量图形
- 2. `SVG`作用
- - 1. 文档结构
  - 2. `circle`
  - 3. 指定样式 - `fill, stroke`
  - 4. 线 - `line`
  - 5. 变换坐标系统 - `use, transform, scale`
  - 6. 折线 - `polyline`
  - 7. `path`
  - 8. `text`
2. 网页中使用`SVG`
- 1. 常见的插入网页的方法
- - 1. ``
- 2. `css`
- 2. `SVG`作为应用程序
- 3. 混合文档的`SVG`
- - 1. `svg`内插入`html`
  - 4. `HTML`内联`svg`
3. 坐标系统
- 1. 画布区域 - 视口
- - 单位
- 2. 默认用户坐标
- 3. 指定用户坐标
- 4. 宽高比
- 5. 视口对齐方式 - `preserveAspectRatio`
4. 基本形状
- `line`
- `style`
- `rect`
- `circle, ellipse`
- 多边形 - `polygon`
5. 文档结构
- 1. 在`svg`中使用样式
- - 内联
  - 内部样式表
  - 外部样式表
- 2. 分组和引用对象
- - ` `元素
  - ` `元素
  - ` `
  - ``
  - ``
6. 坐标系统变换
- `translate`
- `scale`
- 变换序列 - `transform`
- 笛卡尔坐标系统转换
- rotate
- 倾斜 - `skewX, skewY`变换
7. 路径
- 1. `moveTo, lineTo, closePath`
- 2. 快捷方式
- 3. 椭圆弧 - `A`
- 4. 贝塞尔曲线 - `Q`
- 5. 三次贝塞尔曲线 - `C`
- 6. ` `
8. 图案和渐变
- `patternUnits`
- 渐变 - `linearGradient`
- `radialGradient`元素
9. 文本
- 多语言系统 - `switch`
10. 裁剪和蒙版
- 裁剪 - ``
- 蒙版 - ``
11. 滤镜
- 投影 - ``
- 发光式投影 - `feColorMatrix`
- ``
12. `SVG`动画
- 1. 收缩矩形
- 动画时间详解
- 同步动画
- 重复动作
- 复杂的属性应用动画
- `from, to`指定多个值 - `values`
- 多级动画时间
- 运动中指定关键点和时间
- `CSS`处理
- - 设置关键帧
13. 添加交互
- 在`svg`中使用链接
- 交互式
- 脚本控制`svg`
- 拖拽对象

前言

本书为《SVG Essential》的阅读笔记

1. 入门

SVG是一种XML应用，可移植的形式

1. 图形系统

描述图形信息的两大系统：

栅格图形 - raster graphics
矢量图形 - vector graphics

1. 栅格系统

图像被表示为图片元素或者像素的长方形数组
每个像素用RGB表示
位图

2. 矢量图形

线条
不失真

2. `SVG`作用

特定的二进制格式存储绘图信息

1. 文档结构

xml处理指令
DOCTYPE声明
SVG根元素：声明width, height
title
desc

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC ""><svg width="140" height="170" xmlns="http://www.w3.org/2000/svg">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>
<!-- 在这里绘图 -->
</svg>

2. `circle`

<?xml version="1.0"?>
<!DOCTYPE svg><svg width="140" height="170" xmlns="http://www.w3.org/2000/svg">
<title>Cat</title>
<desc>Stick Figure of a Cat</desc>
<!-- 在这里绘图 -->
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none" />
</svg>

在这里插入图片描述

3. 指定样式 - `fill, stroke`

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none" />

4. 线 - `line`

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none" />
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933" />
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933" />
<g id="whiskers"><line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" /><line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" />
</g>

在这里插入图片描述

5. 变换坐标系统 - `use, transform, scale`

use：复用
transform：变换
- translate：移动
- scale：大小和方向

<circle cx="70" cy="95" r="50" style="stroke: black; fill: none" />
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933" />
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933" />
<g id="whiskers"><line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" /><line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" />
</g>
<use href="#whiskers" transform="scale(-1,1) translate(-140, 0)" />

在这里插入图片描述

6. 折线 - `polyline`

points：接收一对x y多组作为数据

<polyline points="35 110, 45 120, 95 120, 105 110" style="stroke: black; fill: none;" />

7. `path`

路径通用写法
用来简洁指定路径或者一系列直线和曲线

<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" />

8. `text`

<text x="60" y="165" style="font-family: sans-serif; font-size: 14pt; stroke: none; filee: black;">Cat</text>

2. 网页中使用`SVG`

图形集成到一个较大的文档中

1. 常见的插入网页的方法

<img>标签内：页面基本组成部分
css：主要用来装饰

1. `<img>`

<img src="cat.svg" title="Cat image" alt="cat">

2. `css`

div.background-cat {background-image: url("cat.svg");background-size: 100% 100%；       
}

2. `SVG`作为应用程序

为了引入图像，但又不想被上面引入，使用<Object>或者<embed>

<object data="./test.svg" type="image/svg+xml">
</object>

<embed src="./test.svg">
</embed>

3. 混合文档的`SVG`

一个文件包含SVG，HTML, XML

1. `svg`内插入`html`

<foreignObject>

<g transform="skewX(20)"><switch><foreignObject><h1>Hellp</h1></foreignObject><text>This</text></switch>
</g>

4. `HTML`内联`svg`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>svg {display: block;width: 500px;height: 500px;margin: auto;border: thick double navy;background-color: lightblue;}body{font-family: cursive;}circle {fill: lavender;stroke: navy;strike-width: 5;}</style>
</head>
<body><h1>Inline SVG in HTML Demo Page</h1><svg viewBox="0 0 250 250"><title>An SVG circle</title><circle cx="125" cy="125" r="100" /><text x="125" y="125" dy="0.5em" text-anchor="middle">Look Me!</text></svg><p>Again</p>
</body>
</html>

3. 坐标系统

1. 画布区域 - 视口

svg的width, height

单位

em - 默认。文本行高
ex
px
pt
pc
cm
mm
in

<svg width="200px" height="150px"></svg>

2. 默认用户坐标

<rect x="10" y="10" width="50" height="30" />

3. 指定用户坐标

viewBox：想要叠加在视口上的用户坐标系统最小的坐标

<svg width="4em" height="5cm" viewBox="0 0 64 80"></svg>

$\times 16 = 64$
后序默认单位就会改变

4. 宽高比

视口的宽高比可以和viewBox的宽高比不同

<svg width="45" height="135" viewBox="0 0 90 90"></svg>

svg会拉伸改变

5. 视口对齐方式 - `preserveAspectRatio`

preserveAspectRatio="aligment [meet | slice]"：相对视口的对齐方式

<svg width="45" height="135" viewBox="0 0 90 90" preserveAspectRatio="xMinYMin meet"></svg>

meet：整体位置
slice：切分位置

4. 基本形状

`line`

line：线条
stroke-width：笔画宽度

`style`

stroke：笔画颜色
stroke-linecap：线帽
stroke-linejoin：线段在图形棱角处交叉时的效果
stroke-opacity：控制不透明度
stroke-dasharray：虚线实线

`rect`

fill：颜色填充
fill-opacity：填充透明度
rx, ry：圆角矩形

<rect x="10" y="10" width="20" height="40" rx="2" ry="2" />

`circle, ellipse`

<circle cx="30" cy="30" r="20" />
<ellipse cx="80" cy="80" rx="20" ry="10" />

多边形 - `polygon`

会自动回到起始坐标

<polygon points="48,16 16,96 96,48 0,48 80,96" />

5. 文档结构

允许文档表现和文档结构分离

1. 在`svg`中使用样式

内联

<text x="60" y="165" style="font-family: sans-serif; font-size: 14pt; stroke: none; filee: black;">Cat</text>

内部样式表

<svg>
<defs><style type="text/css"><![CDATA[circle {fill: #ffc;}]]></style>
</defs><circle />
</svg>

外部样式表

rect {stroke-dasharray: 7 3;
}

<?xml version="1.0"?>
<?xml-stylesheet href="./xx.css" type="text/css">

2. 分组和引用对象

`<g>`元素

所有子元素作为一个组合，并指定id

<g id="xxx"><desc></desc><title></title>
</g>
<g id="yxx"><desc></desc><title></title>
</g>

<?xml version="1.0"?>
<!DOCTYPE svg>
<svg width="240px" height="240px" viewBox="0 0 240 240"xmlns="http://www.w3.org/2000/svg"><title>Group</title><g id="house" style="fill: none; stroke: black;"><desc></desc><rect x="6" y="50" width="60" height="60" /><polyline points="6 50, 36 9, 66 50" /><polyline points="36 110, 36 80, 50 80, 50 110" /></g><g id="man" style="fill:none; stroke: black;"><circle cx="85" cy="56" r="10" /><line x1="85" y1="66" x2="85" y2="80" /><polyline points="76 104, 85 80, 94 104" /><polyline points="76 70, 85 76, 94 70" /></g><g id="woman" style="fill:none; stroke: black;"><circle cx="110" cy="56" r="10" /><line x1="104" y1="104" x2="108" y2="90" /><line x1="112" y1="90" x2="116" y2="104" /><polyline points="110 66, 110 80, 100 90, 120 90, 110 80" /><polyline points="101 70, 110 76, 119 80" /></g>
</svg>

`<use>`元素

重复元素使用
除了同一文件内的对象还可以指定任意有效的文件和URI，但会出现不允许跨域的情况

<use href="#house" x="70" y="100" />
<use href="#woman" x="-80" y="100" />
<use href="#man" x="-30" y="100" />

`<defs>`

只定义不显示，用来存储数据
根据需求进行调用处理

<?xml version="1.0"?>
<!DOCTYPE svg>
<svg width="240px" height="240px" viewBox="0 0 240 240"xmlns="http://www.w3.org/2000/svg"><title>Group</title><defs><g id="house" style="stroke: black;"><desc></desc><rect x="6" y="50" width="60" height="60" /><polyline points="6 50, 36 9, 66 50" /><polyline points="36 110, 36 80, 50 80, 50 110" /></g><g id="man" style="stroke: black;"><circle cx="85" cy="56" r="10" /><line x1="85" y1="66" x2="85" y2="80" /><polyline points="76 104, 85 80, 94 104" /><polyline points="76 70, 85 76, 94 70" /></g><g id="woman" style="stroke: black;"><circle cx="110" cy="56" r="10" /><line x1="104" y1="104" x2="108" y2="90" /><line x1="112" y1="90" x2="116" y2="104" /><polyline points="110 66, 110 80, 100 90, 120 90, 110 80" /><polyline points="101 70, 110 76, 119 80" /></g></defs><use href="#house" x="70" y="100" style="fill: #cfc;" /> <use href="#woman" x="-80" y="100" style="fill: #cfc;" /><use href="#man" x="-30" y="100" style="fill: #c00;" />
</svg>

在这里插入图片描述

`<symbol>`

另一种组合元素的方式，永远不会显示，无需放到defs里
use使用与上相同

`<image>`

引入img

<?xml version="1.0"?>
<!DOCTYPE svg>
<svg width="240px" height="240px" viewBox="0 0 240 240"><image href="0-circle.png"x="72" y="92"width="160" height="120" />
</svg>

6. 坐标系统变换

旋转、缩放、移动

`translate`

把坐标移动到指定位置，然后在(0,0)绘图
改变网格在画布上的位置
transform="translate(50,50)"

`scale`

尺寸
改变对应画布上的坐标系统（网格）的大小
transform(xvalue, yvalue), transform(value)

变换序列 - `transform`

多个变换
变换顺序和书写顺序相同
transform="translate(value) scale(value)"

笛卡尔坐标系统转换

与默认相反，需要变换y轴方向
transfortransform=translattranslate(0,100) scale(1, -1)

rotate

根据指定的角度旋转坐标系统，默认顺时针
旋转的中心默认位(0,0)
transform(rotate(45))
tranform(rotate(angle, centerX, centerY)), transform(translate(centerX, centerY) rotate(angle)), translate(-centerX, -centerY)指定点旋转
围绕中心点缩放：translate(-centerX*(factor-1), -centerY*(factor-1)) scale(factor)

<?xml version="1.0"?>
<!DOCTYPE svg>
<svg width="240px" height="240px" viewBox="0 0 240 240"     xmlns="http://www.w3.org/2000/svg"><rect x="70" y="30" width="20" height="20" style="fill:gray" /><rect x="70" y="30" width="20" height="20" transform="rotate(45)"style="fill:black" /><image href="0-circle.png"x="72" y="92"width="160" height="120" />
</svg>

在这里插入图片描述

倾斜 - `skewX, skewY`变换

倾斜某个轴，单位为角度
skewX(angle)倾斜x坐标，会让垂直线出现角度
skewY(angle)倾斜y坐标，会让水平线出现角度

7. 路径

1. `moveTo, lineTo, closePath`

每个命令以moveTo开始，缩写为M
lineTo绘制线条，缩写为L
closePath绘制一条直线回到当前子路径的起点，缩写为Z
缩写的大小写是存在区别的
- 大写：坐标是绝对
- 小写：坐标是相对

<path d="M 10,20 L 100,20 L 90,60 Z" />

2. 快捷方式

H 20 = L 20 current_y
h 20 = l 20 0
V 20 = L current_x 20
v 20 = l 0 20

3. 椭圆弧 - `A`

A x ,y ...或者a x, y ...

4. 贝塞尔曲线 - `Q`

<path d="M 30 75 Q 240 30, 300 120" />

5. 三次贝塞尔曲线 - `C`

<path d="M 30 75 C 240 30, 300 120, 200 120" />

6. `<marker>`

<?xml version="1.0"?>
<!DOCTYPE svg>
<svg width="500" height="500" viewBox="0 0 240 240"     xmlns="http://www.w3.org/2000/svg"><defs>
<marker id="mCircle" markerWidth="10" markerHeight="10"refX="5" refY="5"><circle cx="5" cy="5" r="4" style="fill:none; stroke:black;" />
</marker><marker id="mArrow" markerWidth="4" markerHeight="8"refX="0" refY="4"><path d="M 0 0 4 4 0 8" style="fill: none; stroke: black;" />
</marker><marker id="mTraingle" markerWidth="5" markerHeight="10"refX="5" refY="5"><path d="M 0 0 5 5 0 10 Z" style="fill: black;" />
</marker>
</defs><path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"style="marker-start:url(#mCircle);
            marker-mid: url(#mArrow);
            marker-end: url(#mTraingle);
             fill: none; stroke: black;" />
</svg>

在这里插入图片描述

8. 图案和渐变

`patternUnits`

<defs>
<pattern id="tile" x="0" y="0" width="20%" height="20%"patternUnits="objectBoundingBox"><path d="M 0 0 Q 5 20 10 10 T 20 20" style="stroke:black; fill: none;"/><path d="M 0 0 h 20 v 20 h -20 z" style="stroke: gray; fill: none;"/>
</pattern>
</defs><rect x="20" y="20" width="100" height="100"style="fill: url(#tile); stroke: black;" />

在这里插入图片描述

渐变 - `linearGradient`

沿着线，一系列颜色过度
<stop>：中间条件
- offset：确定位置
- stop-color：颜色
方向渐变：<linearGradient x1="100%" y1="0%" x2="0%" y2="100%"></linearGradient>

<?xml version="1.0"?>
<!DOCTYPE svg>
<svg width="500" height="500" viewBox="0 0 240 240"     xmlns="http://www.w3.org/2000/svg"><defs>
<linearGradient id="two_hues"><stop offset="0%" style="stop-color: #ffcc00;" /><stop offset="100%" style="stop-color: #0099cc;" />
</linearGradient>
</defs>
<rect x="20" y="20" width="100" height="100"style="fill: url(#two_hues); stroke: black;" />
</svg>

在这里插入图片描述

`radialGradient`元素

径向渐变，由中心点向外扩散
<linearGradient cx="100%" cy="0%" r="141%"></linearGradient>

9. 文本

多语言系统 - `switch`

systemLanguage ：设置属性

<?xml version="1.0"?>
<!DOCTYPE svg>
<svg width="500" height="500" viewBox="0 0 240 240"     xmlns="http://www.w3.org/2000/svg"><g systemLanguage="en">
...
</g>
</svg>

10. 裁剪和蒙版

裁剪 - `<clipPath>`

<defs>
<clipPath id="x"></clipPath>
</defs><use href="xx" style="clip-Path: url(#x)" />

蒙版 - `<mask>`

蒙版会变换对象的透明度

11. 滤镜

<filter>，指定操作

投影 - `<feGaussianBlur>`

sourceGraphic：输入源
SourceAlpha：不透明通道
stdDeviation：模糊度
result：当前元可以通过blur名引用
<feOffset>：返回结果blur
<feMerge>：包裹元素列表

<defs>
<filter id="drop-shadow"><feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur" /><feOffset in="blur" dx="4" dy="4" result="offsetBlur" /><feMerge><feMergeNode in="offsetBlur" ><feMergeNode in="SourceGraphic" /></feMerge></filter>
</defs><g id="flower" filter="url(#drop-shadow)">
</g><use href="#flower" filter="url(#drop-shadow)"transform="translate(4,4)" />

发光式投影 - `feColorMatrix`

通用方式改变颜色值

<filter id="glow"><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0.9 00 0 0 0.9 00 0 0 1 0" /><feGaussianBlur stdDeviation="2.5"result="coloredBlur" /><feMerge><feMergeNode in="coloredBlur" /><deMergeNode in="SourceGraphic" /></feMerge>
</filter>

`<feImage>`

原始图形可以作为滤镜的输入量

<?xml version="1.0"?>
<!DOCTYPE svg>
<svg width="800" height="500" viewBox="0 0 240 240"     xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="sky-shadow" filterUnits="objectBoundingBox"><feImage href="./0-circle.png" result="sky"x="0" y="0" width="100%" height="100%"preserveAspectRatio="none" />
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur" />
<feOffset in="blur" dx="4" dy="4" resulut="offsetBlur" />
<feMerge><feMergeNode in="sky" /><feMergeNode in="offsetBlur" /><feMergeNode in="SourceGraphic" />
</feMerge></filter>
</defs>
<g id="flower" style="filter: url(#sky-shadow)"><path d="M 0 0 L 10 50 L 80 90 Z" />
</g><image href="./0-circle.png" x="170" y="10" />
</svg>

12. `SVG`动画

1. 收缩矩形

attributeName：动画中持续改变的值
attributeType：有XML, css两种。默认auto，先css后xml
from, to：起始、终止
begin：开始时间
dur：持续时间
fill:freeze：默认不再处理，如果要恢复属性为remove

<?xml version="1.0"?>
<!DOCTYPE svg>
<svg width="800" height="500" viewBox="0 0 240 240"     xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="200" height="20" strooke="black" fill="none"><animateattributeName="width"attributeType="XML"from="200"to="20"begin="2s"dur="5s"fill="freeze" />
</rect>
</svg>

<?xml version="1.0"?>
<!DOCTYPE svg>
<svg width="800" height="500" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="200" height="200" strooke="black" fill="black"><animateattributeName="width"attributeType="XML"from="200"to="20"begin="0s"dur="2s"fill="freeze" /><animateattributeName="height"attributeType="XML"from="200"to="20"begin="0s"dur="2s"fill="remove" /><animateattributeName="fill-opacity"attributeType="CSS"from="0.25"to="1"begin="0s"dur="2s"fill="freeze" /><animateattributeName="fill-opacity"attributeType="CSS"from="1"to="0.25"begin="3s"dur="2s"fill="freeze" />
</rect>
</svg>

动画时间详解

单位时间：h, min, s, ms

同步动画

begin="id.end"
begin="id.begin+1.25s"

重复动作

repeatCount：指定重复次数
repeatDur：持续多久
如果要重复到用户离开，而指定indefinite值
begin="id.repeat(n)+xx"指定动画重复n次后开始

复杂的属性应用动画

from, to值可以是颜色或者位置

`from, to`指定多个值 - `values`

values=start;end;start;

多级动画时间

keyTimes：以其他方式划分持续时间
<set>：动画序列修改个值

运动中指定关键点和时间

<path d="M -10,-3 L 10,-3 L 0,-25 Z" style="fill: yellow; stroke:red;" >
<animation path="M50,125 C 100,25 150,225, 200,125"rotate="auto"keyPooints="0;0.2;0.8;1"keyTimes="0;0.33;0.66;1"calcMode="linear"dur="6s" fill="freeze" />
</path>

`CSS`处理

在css中给动画元素设置：

animation-name：@keyframes名
animation-duration
animation-timing-function：如何计算中间值
animation-iteration-count：重复次数
animation-direction：正向或者反向
animation-play-state
animation-delay
animation-fill-mode：不执行时使用的属性

设置关键帧

@keyframes这一媒体类型设置动画每个阶段要该改变的属性

@keyframes {0% {fill-opacity: 1.0;stroke-width: 0;}100% {fill-opacity: 0;stroke-width: 6;}
}

13. 添加交互

在`svg`中使用链接

<a href="http://www.baidu.com"><path d="M120 90, 140 50, 160 90 Z" style="fill: blue;" />
</a>

交互式

绑定button对象：begin="button.click"

脚本控制`svg`

<svg width="300" height="100" viewBox="0 0 300 100"xmlns="http://www.w3.org/2000/svg">
<rect id="rectangle" x="10" y="20" width="30" height="40"style="stroke:gray; fill:#ff9; stroke-width:3;" /><script type="application/ecmascript">
// <![CDATA[var txt = document.getElementById("output");
// ]]>
</script>
</svg>

拖拽对象

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN""http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg width="400" height="250" viewBox="0 0 400 250"onload="init(evt)"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css" > <![CDATA[svg { /* default values */stroke: black;fill: white;}g.selected rect {fill: #ffc; /* light yellow */}text {stroke: none;fill:black;text-anchor: middle;}line.slider {stroke: gray; stroke-width: 2;}]]></style><script type="text/ecmascript"><![CDATA[var scaleChoice = 1;var scaleFactor = [1.25, 1.5, 1.75];var slideChoice = -1;var rgb = [100, 100, 100];function init(evt) {  var obj;for (var i = 0; i < 3; i++) {obj = document.getElementById("scale" + i);obj.addEventListener("click", clickButton, false);obj = document.getElementById("sliderGroup" + i);obj.addEventListener("mousedown", startColorDrag, false);obj.addEventListener("mousemove", doColorDrag, false);obj.addEventListener("mouseup", endColorDrag, false);}document.getElementById("eventCatcher").addEventListener("mouseup", endColorDrag, false);transformShirt();}function clickButton(evt) {var choice = evt.target.parentNodevar name = choice.getAttribute("id");var old = document.getElementById("scale" + scaleChoice);old.removeAttribute("class");choice.setAttribute("class", "selected");scaleChoice = parseInt(name[name.length - 1]);transformShirt();}function transformShirt() {    var factor = scaleFactor[scaleChoice];var obj = document.getElementById("shirt");obj.setAttribute("transform","translate(150, 150) " +"scale(" + factor + ")");obj.setAttribute("stroke-width",1 / factor);}/** Stop dragging the current slider (if any)* and set the current slider to the one specified.* (0 = red, 1 = green, 2 = blue)*/function startColorDrag(evt) {var sliderId = evt.target.parentNode.getAttribute("id");endColorDrag( evt );slideChoice = parseInt(sliderId[sliderId.length - 1]);}/** Set slider choice to -1, indicating that no* slider is begin dragged. No access to the event* is needed for this function.*/function endColorDrag(evt) {slideChoice = -1;}function doColorDrag(evt) {var sliderId = evt.target.parentNode.getAttribute("id");chosen = parseInt(sliderId[sliderId.length - 1]);if (slideChoice >= 0 && slideChoice == chosen) {var pos = evt.clientY - 10;if (pos < 0) { pos = 0; }if (pos > 100) { pos = 100; }obj = document.getElementById("slide" + slideChoice);obj.setAttribute("y1", pos);obj.setAttribute("y2", pos);rgb[slideChoice] = 100-pos;var colorStr = "rgb(" + rgb[0] + "%," +rgb[1] + "%," + rgb[2] + "%)";        obj = document.getElementById("shirt");obj.style.setProperty("fill", colorStr, null);}}]]></script><path id="shirt-outline"d="M -6 -30 -32 -19 -25.5 -13 -22 -14 -22 30 23 3023 -14 26.5 -13 33 -19 7 -30A 6.5 6 0 0 1 -6 -30"/></defs><rect id="eventCatcher" x="0" y="0" width="400" height="300"style="fill: none; stroke:none;" pointer-events="visible" /><g id="shirt" ><use xlink:href="#shirt-outline" x="0" y="0"/></g><g id="scale0" > <rect x="100" y="10" width="30" height="30" /><text x="115" y="30">S</text></g><g id="scale1" class="selected"><rect x="140" y="10" width="30" height="30" /><text x="155" y="30">M</text></g><g id="scale2" ><rect x="180" y="10" width="30" height="30" /><text x="195" y="30">L</text></g><g id="sliderGroup0" transform="translate( 230, 10 )"><rect x="-10" y="-5" width="40" height="110"/><rect x="5" y="0" width="10" height="100" style="fill: red;"/><line id="slide0" class="slider"x1="0" y1="0" x2="20" y2="0" /></g><g id="sliderGroup1" transform="translate( 280, 10 )"><rect x="-10" y="-5" width="40" height="110"/><rect x="5" y="0" width="10" height="100" style="fill: green;"/><line id="slide1" class="slider"x1="0" y1="0" x2="20" y2="0" /></g><g id="sliderGroup2" transform="translate( 330, 10 )"><rect x="-10" y="-5" width="40" height="110"/><rect x="5" y="0" width="10" height="100" style="fill: blue;"/><line id="slide2" class="slider"x1="0" y1="0" x2="20" y2="0" /></g>
</svg>

在这里插入图片描述

这篇关于SVG精髓-svg开发指南的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

SVG精髓-svg开发指南

文章目录

前言

推荐阅读

1. 入门

1. 图形系统

1. 栅格系统

2. 矢量图形

2. SVG作用

1. 文档结构

2. circle

3. 指定样式 - fill, stroke

4. 线 - line

5. 变换坐标系统 - use, transform, scale

6. 折线 - polyline

7. path

8. text

2. 网页中使用SVG

1. 常见的插入网页的方法

1. <img>

2. css

2. SVG作为应用程序

3. 混合文档的SVG

1. svg内插入html

4. HTML内联svg

3. 坐标系统

1. 画布区域 - 视口

单位

2. 默认用户坐标

3. 指定用户坐标

4. 宽高比

5. 视口对齐方式 - preserveAspectRatio

4. 基本形状

line

style

rect

circle, ellipse

多边形 - polygon

5. 文档结构

1. 在svg中使用样式

内联

内部样式表

外部样式表

2. 分组和引用对象

<g>元素

<use>元素

<defs>

<symbol>

<image>

6. 坐标系统变换

translate

scale

变换序列 - transform

笛卡尔坐标系统转换

rotate

倾斜 - skewX, skewY变换

7. 路径

1. moveTo, lineTo, closePath

2. 快捷方式

3. 椭圆弧 - A

4. 贝塞尔曲线 - Q

5. 三次贝塞尔曲线 - C

6. <marker>

8. 图案和渐变

patternUnits

渐变 - linearGradient

radialGradient元素

9. 文本

多语言系统 - switch

10. 裁剪和蒙版

裁剪 - <clipPath>

蒙版 - <mask>

11. 滤镜

投影 - <feGaussianBlur>

发光式投影 - feColorMatrix

<feImage>

12. SVG动画

1. 收缩矩形

动画时间详解

同步动画

2. `SVG`作用

2. `circle`

3. 指定样式 - `fill, stroke`

4. 线 - `line`

5. 变换坐标系统 - `use, transform, scale`

6. 折线 - `polyline`

7. `path`

8. `text`

2. 网页中使用`SVG`

1. `<img>`

2. `css`

2. `SVG`作为应用程序

3. 混合文档的`SVG`

1. `svg`内插入`html`

4. `HTML`内联`svg`

5. 视口对齐方式 - `preserveAspectRatio`

`line`

`style`

`rect`

`circle, ellipse`

多边形 - `polygon`

1. 在`svg`中使用样式

`<g>`元素

`<use>`元素

`<defs>`

`<symbol>`

`<image>`

`translate`

`scale`

变换序列 - `transform`

倾斜 - `skewX, skewY`变换

1. `moveTo, lineTo, closePath`

3. 椭圆弧 - `A`

4. 贝塞尔曲线 - `Q`

5. 三次贝塞尔曲线 - `C`

6. `<marker>`

`patternUnits`

渐变 - `linearGradient`

`radialGradient`元素

多语言系统 - `switch`

裁剪 - `<clipPath>`

蒙版 - `<mask>`

投影 - `<feGaussianBlur>`

发光式投影 - `feColorMatrix`

`<feImage>`

12. `SVG`动画

`from, to`指定多个值 - `values`

`CSS`处理

在`svg`中使用链接

脚本控制`svg`