SVG教程 #38
Comments
SVG入门教程
[TOC] 概述SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
<html>
<head>SVG</head>
<body>
<!--直接插入svg代码-->
<svg width="300" height="180">
<circle cx="30" cy="50" r="25" />
</svg>
<!--独立文件插入-->
<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>
<!--base64-->
<img src="data:image/svg+xml;base64,[data]">
<!--css中引入-->
<style>
.logo {
background: url(icon.svg);
}
</style>
</body>
</html>语法2.1
|
| 指令 | 参数 | 描述 |
|---|---|---|
M |
x y |
起始点坐标x y （Move to） |
L |
x y |
从当前点的坐标画直线到指定点的 x y坐标 （Line to） |
H |
x |
从当前点的坐标画水平直线到指定的x轴坐标 （Horizontal line to） |
V |
y |
从当前点的座标画垂直直线到指定的y轴坐标 （Vertical line to） |
C |
x1 y1 x2 y2 x y |
从当前点的坐标画条贝塞尔曲线到指定点的x, y坐标，其中 x1 y1及x2, y2为控制点 （Curve） |
S |
x2 y2 x y |
从当前点的坐标画条反射的贝塞曲线到指定点的x, y坐标，其中x2, y2为反射的控制点（Smooth curve） |
Q |
x1 y1 x y |
从当前点的坐标画条反射二次贝塞曲线到指定点的x, y坐标，其中x1 y1为控制点（Quadratic Bézier curve） |
T |
x y |
从当前点的坐标画条反射二次贝塞曲线到指定点的x, y坐标，以前一个坐标为反射控制点（Smooth Quadratic Bézier curve） |
A |
rx ry x-axis-rotation large-arc-flag sweep-flag x y |
从当前点的坐标画个椭圆形到指定点的x, y坐标，其中rx, ry为椭圆形的x轴及y轴的半径，x-axis-rotation是弧线与x轴的旋转角度，large-arc-flag则设定1最大角度的弧线或是0最小角度的弧线，sweep-flag设定方向为1顺时针方向或0逆时针方向（Arc） |
Z |
关闭路径，将当前点坐标与第一个点的坐标连接起来（Closepath） |
2.9 <text>文本
<text>标签用于绘制文本。
<svg height="200" width="200">
<text x="10" y="20" style="fill:red;" font-weight="bold">Several lines:
<tspan x="24" y="45">First line.</tspan>
<tspan x="24" y="70">Second line.</tspan>
</text>
</svg><text>的x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。
设置字体属性：
SVG提供了一些属性，类似于它们的CSS同行，用来激活文本选区。下列每个属性可以被设置为一个SVG属性或者成为一个CSS声明：font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。
文本相关的元素：
tspan: 用来标记大块文本的子部分，它必须是一个text元素或别的tspan元素的子元素。tref: 允许引用已经定义的文本，高效地把它复制到当前位置。你可以使用xlink:href属性，把它指向一个元素，取得其文本内容。你可以独立于源样式化它、修改它的外观。textPath: 该元素利用它的xlink:href属性取得一个任意路径，把字符对齐到路径，于是字体会环绕路径、顺着路径走。
2.10 <use>标签
<use>标签用于复制一个形状。
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4"/>
<use href="#myCircle" x="10" y="0" fill="blue" />
<use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
</svg><use>的href属性指定所要复制的节点，x属性和y属性是<use>左上角的坐标。另外，还可以指定width和height坐标。
2.11 <g>组
<g>标签用于将多个形状组成一个组（group），方便复用。
<svg width="300" height="100">
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>2.12 <defs>标签
<defs>标签用于自定义形状，它内部的代码不会显示，仅供引用。
<svg width="300" height="100">
<defs>
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
</defs>
<use href="#myCircle" x="0" y="0" />
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>2.13 <pattern>标签
<pattern>标签用于自定义一个形状，该形状可以被引用来平铺一个区域。
<svg width="500" height="500">
<defs>
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle fill="#bee9e8" cx="50" cy="50" r="35" />
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>上面代码中，<pattern>标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示<pattern>的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。
2.14 <image>图片
<image>标签用于插入图片文件。
<svg viewBox="0 0 100 100" width="100" height="100">
<image xlink:href="path/to/image.jpg"
width="50%" height="50%"/>
</svg>上面代码中，<image>的xlink:href属性表示图像的来源。
2.15 <animate>动画
<animate>标签用于产生动画效果。
<svg width="500px" height="500px">
<rect x="0" y="0" width="100" height="100" fill="#feac5e">
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
</rect>
</svg>上面代码中，矩形会不断移动，产生动画效果。
<animate>的属性含义如下。
- attributeName：发生动画效果的属性名。
- from：单次动画的初始值。
- to：单次动画的结束值。
- dur：单次动画的持续时间。
- repeatCount：动画的循环模式。
可以在多个属性上面定义动画。
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
<animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />2.16 <animateTransform>变形动画
<animate>标签对 CSS 的transform属性不起作用，如果需要变形，就要使用<animateTransform>标签。
<svg width="500px" height="500px">
<rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
<animateTransform
attributeName="transform"
type="rotate"
begin="0s"
dur="10s"
from="0 200 200"
to="360 400 400"
repeatCount="indefinite"
/>
</rect>
</svg>上面代码中，<animateTransform>的效果为旋转（rotate），这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。from="0 200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；to="360 400 400"表示结束时，角度为360，围绕(400, 400)旋转。
2.17 <animateMotion> 路径动画
<animateMotion> 元素可以定义一个元素沿着指定路径进行移动。
- 直线路径可以简单使用
from + to属性来指定起点和终点; - 使用
path指定复杂的路径； - 可以指定
<path>元素作为自己的路径
**注意：**为了复用一个已经定义的路径，就有必要使用一个
mpath元素嵌入到<animateMotion>中，而不是使用path。例如：
<mpath xlink:href="#cubicCurve"/>
<svg viewBox="0 0 200 100">
<path id="cubicCurve" fill="none" stroke="lightgrey" d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
<circle r="5" fill="red">
<animateMotion
dur="10s"
repeatCount="indefinite"
path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z"
/>
</circle>
<rect x="0" y="0" width="10" height="10" fill="blue">
<animateMotion dur="20" repeatCount="indefinite">
<mpath xlink:href="#cubicCurve" />
</animateMotion>
</rect>
</svg>
<animateMotion>有个rotate属性，默认为0，元素在运动时不会旋转。当设置为auto时，元素对应的水平轴会始终与path路径保持水平，上图中加上rotate="auto"后的效果就像是车子开过山坡。
2.17 <linearGradient> 线性渐变
渐变有两种类型：
线性渐变和径向渐变。你必须给渐变内容指定一个id属性，否则文档内的其他元素就不能引用它。为了让渐变能被重复使用，渐变内容需要定义在<defs>标签内部，而不是定义在形状上面。
线性渐变沿着直线改变颜色，要插入一个线性渐变，你需要在SVG文件的defs元素内部，创建一个<linearGradient> 节点。
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1">
<stop class="stop1" offset="0%"/>
<stop class="stop2" offset="50%"/>
<stop class="stop3" offset="100%"/>
</linearGradient>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="black" stop-opacity="0"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
<style type="text/css"><![CDATA[
#rect1 { fill: url(#Gradient1); }
.stop1 { stop-color: red; }
.stop2 { stop-color: black; stop-opacity: 0; }
.stop3 { stop-color: blue; }
]]></style>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
</svg>2.18 <radialGradient>径向渐变
<?xml version="1.0" standalone="no"?>
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="RadialGradient1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
</svg>2.19 <clipPath>剪切
我们在一个圆形的基础上创建半圆形，在(100,100)创建一个圆形，半径是100。属性clip-path引用了一个带单个rect元素的<clipPath>元素。它内部的这个矩形将把画布的上半部分涂黑。注意，clipPath元素经常放在一个defs元素内。
<svg version="1.1">
<defs>
<clipPath id="cut-off-bottom">
<rect x="0" y="0" width="200" height="100" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>2.20 <mask>遮罩
遮罩的效果最令人印象深刻的是表现为一个渐变。如果你想要让一个元素淡出，你可以利用遮罩效果实现。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="Gradient">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="Mask">
<rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="green" />
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>2.21 <filter>滤镜
见 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Filter_effects
填充和描边
以下属性均可以直接用作CSS样式表内部的属性。
填充属性
fill : 设置SVG对象内部的填充色。可选值：颜色值 | none
fill-rule : 确定形状内部（即要填充的区域）的算法。 可选值：nonzero | evenodd
fill-opacity : 控制填充色的不透明度。 可选值：[0-1] | <percentage>
fill-rule比较难懂，详见 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule
描边属性
-
stroke: 描边颜色 -
stroke-width: 描边的粗细 -
stroke-linecap: 描边端点表现方式。可选值：butt | round | square -
stroke-linejoin: 描边转角的表现方式。可选值：miter(尖角) | round(圆角) | bevel(斜角) -
stroke-miterlimit: 描边相交（锐角）的表现方式。默认大小是4stroke-miterlimit属性给miter-length和stroke-width之间的比率做了限制，它的比值范围应大于或等于1。当比值不在这个范围的时候， stroke 就会被转换成斜角（bevel）。 -
stroke-dasharray: 设置虚线描边。可选值为：none | <dasharray> -
stroke-dashoffset: 虚线的起始偏移。可选值为：<percentage> | <length> -
stroke-opacity: 描边透明度。默认是1
stroke-dasharray和stroke-dashoffset可用于实现描边动画。
🌰 心形路径动画例子：
<svg class="heart" width="90" height="90" viewBox="0 0 90 90">
<g class="heart-group">
<path class="heart-heartPath" stroke-width="2" d="M60,30 a30,30 0 0,1 0,60 L0,90 0,30 a30,30 0 0,1 60,0" />
</g>
</svg>
<style>
.heart {
margin: 90px;
overflow: visible;
&-group {
transform-origin: 0 90px;
transform: rotate(-45deg);
animation: group-anim 4s infinite;
}
&-heartPath {
stroke: #E21737;
fill: transparent;
stroke-dasharray: 308.522, 308.522;
stroke-dashoffset: 308.522;
animation: heart-anim 4s infinite;
}
}
@keyframes group-anim {
0%, 100% {
opacity: 0;
}
40%, 90% {
opacity: 1;
}
}
@keyframes heart-anim {
15% {
stroke-dashoffset: 308.522;
fill: transparent;
}
50% {
stroke-dashoffset: 0;
fill: transparent;
}
70%, 100% {
stroke-dashoffset: 0;
fill: #E21737;
}
}
</style>其他属性
vector-effect
vector-effect 指定绘制对象时要使用的矢量效果。矢量效果会先于其他任何合成操作（即滤镜，蒙版和剪辑）应用。
可选值：
none|non-scaling-stroke|non-scaling-size|non-rotation|fixed-position
最常用的就是non-scaling-stroke，指定描边宽度不随SVG本身尺寸变大而变大。
JavaScript 操作
3.1 DOM 操作
如果 SVG 代码直接写在 HTML 网页之中，它就成为网页 DOM 的一部分，可以直接用 DOM 操作。
<svg
id="mysvg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 800 600"
preserveAspectRatio="xMidYMid meet"
>
<circle id="mycircle" cx="400" cy="300" r="50" />
<svg>上面代码插入网页之后，就可以用 CSS 定制样式。
circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
circle:hover {
stroke: #090;
fill: #fff;
}然后，可以用 JavaScript 代码操作 SVG。
var mycircle = document.getElementById('mycircle');
mycircle.addEventListener('click', function(e) {
console.log('circle clicked - enlarging');
mycircle.setAttribute('r', 60);
}, false);上面代码指定，如果点击图形，就改写circle元素的r属性。
3.2 获取 SVG DOM
使用<object>、<iframe>、<embed>标签插入 SVG 文件，可以获取 SVG DOM。
var svgObject = document.getElementById('object').contentDocument;
var svgIframe = document.getElementById('iframe').contentDocument;
var svgEmbed = document.getElementById('embed').getSVGDocument();注意，如果使用<img>标签插入 SVG 文件，就无法获取 SVG DOM。
3.3 读取 SVG 源码
由于 SVG 文件就是一段 XML 文本，因此可以通过读取 XML 代码的方式，读取 SVG 源码。
<div id="svg-container">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve" width="500" height="440"
>
<!-- svg code -->
</svg>
</div>使用XMLSerializer实例的serializeToString()方法，获取 SVG 元素的代码。
var svgString = new XMLSerializer()
.serializeToString(document.querySelector('svg'));
SVG动画入门
[toc] 1.
|
SVG 参考手册SVG 元素
|
svgo - SVG精简压缩工具svgo 是什么？
为什么要用svgo？因为我们从网上下载或者导出的SVG文件中包含着大量无用的信息，例如编辑源信息，注释以及其它一些不会影响渲染效果但可以去除的信息，这时候可以通过svgo插件，将这些无用的信息进行去除，从而达到优化的效果。该svgo具有基于插件的体系结构，因此几乎每个优化都是一个单独的插件。 svgo 怎么使用？
创建
module.exports = {
multipass: true, // boolean. false by default
datauri: 'enc', // 'base64', 'enc' or 'unenc'. 'base64' by default
js2svg: {
indent: 2, // string with spaces or number of spaces. 4 by default
pretty: true, // boolean, false by default
},
plugins: [
// enable a built-in plugin by name
'builtinPluginName',
// or by expanded version
{
name: 'builtinPluginName',
},
// some plugins allow/require to pass options
{
name: 'builtinPluginName',
params: {
optionName: 'optionValue',
},
},
]
};
{
"svgo": "svgo -f src/icons/svg --config=src/svgo.config.js"
}
内置插件列表SVGO基于插件模式构建，基本上所有的优化都是一个分离的插件。
svgo命令svgo [OPTIONS] [ARGS]
Options:
-h, --help : Help 帮助
-v, --version : Version版本
-i INPUT, --input=INPUT : 输入的文件, "-" 为标准输入
-s STRING, --string=STRING : 输入SVG数据字符串
-f FOLDER, --folder=FOLDER : 输入的文件夹，会优化与重写所有的*.svg文件
-o OUTPUT, --output=OUTPUT : 输入的文件或文件夹 (默认同输入), "-" 标准输出
-p PRECISION, --precision=PRECISION : 设置数字的小数部分，重写插件参数
--config=CONFIG : 配置文件扩展或替换默认设置
--disable=DISABLE : 根据名字禁用插件
--enable=ENABLE : 根据名字开启插件
--datauri=DATAURI : 输入文件以Data URI字符串形式(base64, URI encoded or unencoded)
-q, --quiet : 仅输出错误信息，不包括正常状态消息
--pretty : 让SVG漂亮的打印
--show-plugins : 显示可用和存在的插件
Arguments:
INPUT : 别名 --input
OUTPUT : 别名 --outputrefs |
文档
工具
教程
SVG基础教程
SVG 入门指南
svg从入门到图标绘制和组件封装
SVG中的Transform详解: 平移,旋转和缩放
SVG动画从入门到实战
The text was updated successfully, but these errors were encountered: