1. svg 概述
SVG 是对图像的描述、体积小、放大不失真
SVG 文件可以用 JavaScript 和 CSS 进行操作。
2. svg 使用
2.1 直接插入网页,成为 DOM 的一部分
DOCTYPE html>
<html>
<head>head>
<body>
<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>
body>
html>
2.2 写在一个独立文件中,然后用、
<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>
2.3 CSS bg
.logo {
background: url(icon.svg); }
xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="256px" height="256px" viewBox="0 0 128 128" xml:space="preserve"><script type="text/ecmascript" xlink:href="//preloaders.net/jscripts/smil.user.js"/><g><path fill="#199348" fill-opacity="1" d="M116.7 66.28a52.86 52.86 0 0 1-1 8.18l9.8 7.57-1.78 4.67-1.77 4.67-12.36-.82a52.87 52.87 0 0 1-4.7 6.7L110 108.5l-3.75 3.3-3.75 3.32L92 108.67a52.6 52.6 0 0 1-7.45 3.9l-.66 12.3-4.87 1.2-4.86 1.2-6.38-10.66q-1.9.2-3.88.2-2.15 0-4.25-.14l-6.3 10.64-4.84-1.2-4.85-1.2-.7-12.43a52.6 52.6 0 0 1-6.7-3.5l-10.6 6.64-3.75-3.3-3.76-3.3 5.05-11.4a52.88 52.88 0 0 1-4.73-6.73l-12.34.9-1.8-4.66-1.8-4.67 9.7-7.67a52.8 52.8 0 0 1-1-8.05l-11.4-5 .56-4.95.54-4.97 12.26-2.3a52.37 52.37 0 0 1 2.94-7.83L8.4 32l2.8-4.14 2.8-4.14 12 3.68a53.06 53.06 0 0 1 6-5.33L29.57 9.8l4.4-2.37 4.43-2.35 8.95 8.86a52.4 52.4 0 0 1 8-1.98L59 0h10l3.66 11.96a52.4 52.4 0 0 1 7.8 1.9L89.26 5l4.42 2.3 4.43 2.34-2.3 12.27a52.98 52.98 0 0 1 6.2 5.5l11.9-3.7 2.9 4.1 2.84 4.1-7.8 9.8a52.34 52.34 0 0 1 2.86 7.5l12.3 2.17.6 4.96.57 4.95zM41 64a23 23 0 1 0 23-23 23 23 0 0 0-23 23z"/>< /animateTransform></g></svg>
2.4 转为 BASE64 编码,然后作为 Data URI 写入网页
3. svg 基础
3.1 基本使用
>
3.2 使用描述图像的一部分 指定viewBox属性
3.3 常用标签
3.3.1 圆
>
坐标都是相对于
3.3.2 直线
3.3.3 折线
>
的points属性指定了每个端点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。
3.3.4
3.3.5
;rx属性和ry属性,指定了椭圆横向轴和纵向轴的半径(单位像素)。
3.3.6
横坐标与纵坐标之间与逗号分隔,点与点之间用空格分隔。
3.3.7
M:移动到(moveto)
L:画直线到(lineto)
Z:闭合路径
3.3.8
文字的样式可以用class或style属性指定。
3.3.9
3.3.10
3.3.11
3.3.12
上面代码中,
3.3.13
3.3.14
attributeName:发生动画效果的属性名。
from:单次动画的初始值。
to:单次动画的结束值。
dur:单次动画的持续时间。
repeatCount:动画的循环模式。
可以在多个属性上面定义动画。
3.3.15 变形
这时from和to属性值有三个数字,第一个数字是角度值,第二个值和第三个值是旋转中心的坐标。
from="0 200 200"表示开始时,角度为0,围绕(200, 200)开始旋转;
to="360 400 400"表示结束时,角度为360,围绕(400, 400)旋转。
4. js 操作
DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
circle:hover {
stroke: #090;
fill: #fff;
}
svg{
border:1px solid red;
}
style>
head>
<body>
<svg id="mysvg" width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet">
<circle id="mycircle" cx="100" cy="100" r="50" />
svg>
<script>
var mycircle = document.getElementById('mycircle');
mycircle.addEventListener('click', function (e) {
console.log(this,e);
var r=this.getAttribute('r')=='60'?'50':'60';
mycircle.setAttribute('r', r);
}, false);
script>
body>
html>
4.1 路径文本
<svg width="800" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path id="p1" d="M100,200 Q200 100 300 200 T 500 200" stroke="green" fill="none" /> <text style="font-size:20px;"> <textPath xlink:href="#p1">落红不是无情物,一枝红杏出墙来,恰似一江清水向东流。textPath> text> svg>
5.参考网址
SVG 图像入门教程
6.好玩的应用
https://www.svgbackgrounds.com/
https://editor.method.ac/#cut
超级强大的SVG SMIL animation动画详解
SVG+JS path等值变化实现CSS3兴叹的图形动画
阿里 iconfont
十大 svg 库
更全的工具推荐
很有创意的应用
svg 背景网站