svg
什么是SVG? https://www.w3school.com.cn/svg/svg_intro.asp
svg实例汇总 https://www.runoob.com/svg/svg-examples.html
svg全称为Scalable Vector Graphics，是一种使用XML技术描述二维图形的语言，简单来说 - 矢量图(不失真)
在HTML5出现之后,将SVG内容直接定义在HTML页面中
SVG的优势
可以使用文本编辑器创建和修改，SVG可被搜索、索引等，SVG绘制的图像不失真的
-
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
-
SVG 用来定义用于网络的基于矢量的图形
-
SVG 使用 XML 格式定义图形
-
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
-
SVG 是万维网联盟的标准
-
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
与其他图像格式相比，使用 SVG 的优势在于：
-
SVG 可被非常多的工具读取和修改（比如记事本）
-
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
-
SVG 是可伸缩的
-
SVG 图像可在任何的分辨率下被高质量地打印
-
SVG 可在图像质量不下降的情况下被放大
-
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
-
SVG 可以与 Java 技术一起运行
-
SVG 是开放的标准
-
SVG 文件是纯粹的 XML
SVG 的主要竞争者是 Flash。
-
SVG与Canvas的区别
SVG不依赖于分辨率，使用DOM或绑定事件，实现大型渲染区域的应用(地图类)
Canvas依赖于分辨率，不能使用DOM或绑定事件的，运行时以图片形式出现".jpg"
设置样式
1.通过元素的属性方式
fill - 设置填充样式
fill-opacity - 设置填充透明度
stroke - 设置描边样式
stroke-width - 设置边框的宽度
2.通过style属性,使用类似于CSS属性设置方式
注意 - 不能使用CSS中的样式进行设置
transform属性，用于设置转换效果
方法有：rotate()、scale()、translate()
将SVG插入到HTML中主要有以下几种方式：
//优势：所有主要浏览器都支持，并允许使用脚本 //缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
<ember src="xxx.svg" type="image/svg+xml" />
//将 SVG 作为object对象导入
//注意，MIME type必须是*image/svg+xml*。
//可以使用CSS控制SVG的样式
//优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
//缺点：不允许使用脚本
<object data="circle1.svg" type="image/svg+xml"></object>
//将 SVG放入 iframe 中导入
//可以使用CSS控制SVG的样式
//优势：所有主要浏览器都支持，并允许使用脚本
//缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
<iframe src="circle1.svg"></iframe>
//将 SVG 作为图像导入
//这可能是将SVG导入HTML文档的最简单的方法。将`.svg`文件把它加到一个普通`<img>`标签内。
//你需要确保你的[服务器支持`.svg`文件]，可能大多数都是支持的，但是还是查一下的好。
//SVG作为图像引用时:-------------------
//- 大多数浏览器不会加载SVG自身引用的文件(其他图像，外部脚本，字体文件等)
//- 依据浏览器的安全策略，SVG中定义的脚本也可能不会执行
<img src="example.svg" alt="example">
///同时你也可以在CSS中把`.svg`文件作为一个[background-image]导入。
//注意要加一个备用的.png图像，以防浏览器无法显示svg。
.svg-bg {
background: url("example.png"); /* fallback */
background-image: url("example.svg");
}
//使用a标签链接到svg文件
<a href="circle1.svg">View SVG file</a>
//使用内联svg,之间在html中嵌入。
//直接嵌入的SVG会继承父文档的样式，默认情况下采用inline的方式进行显示。
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>
</body>
</html>
svg样式：
//fill填充颜色 stroke 轮廓线颜色 stroke-width 轮廓线宽度 stroke-linecap 属性 strokelinecap属性定义不同类型的开放路径的终结：线条的两端是矩形还是圆角等
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black" stroke-width="6"> <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>
//
<svg xmlns="http://www.w3.org/2000/svg" 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>
SVG滤镜用来增加对SVG图形的特殊效果。所有互联网的svg滤镜定义在<defs>元素中。<defs>元素定义短并含有特殊元素（如滤镜）的定义。<filter>标签用来定义svg滤镜，使用必需的id来定义向图形应用哪个滤镜。
SVG可用的滤镜是：
-
feBlend - 与图像相结合的滤镜
-
feColorMatrix - 用于彩色滤光片转换
-
feComponentTransfer
-
feComposite
-
feConvolveMatrix
-
feDiffuseLighting
-
feDisplacementMap
-
feFlood
-
feGaussianBlur
-
feImage
-
feMerge
-
feMorphology
-
feOffset - 过滤阴影
-
feSpecularLighting
-
feTile
-
feTurbulence
-
feDistantLight - 用于照明过滤
-
fePointLight - 用于照明过滤
-
feSpotLight - 用于照明过滤
除此之外，可以在每个 SVG 元素上使用多个滤镜！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- SVG内容直接定义在html页面中 --> <!-- 直接嵌入的SVG会继承父文档的样式，默认情况下采用inline的方式进行显示。 --> <!-- SVG绘制图形使用‘/’单标签表示结束符 --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="1000"> <!-- 矩形元素 --> <rect x="30" y="30" width="300" height="100" rx="20" ry="20" style="fill:olive;stroke-width:5;stroke:red;"/> <!-- x和y - 绘制矩形的左上角坐标值 width和height - 设置绘制矩形的宽度和高度 rx和xy - 设置矩形的圆角 矩形的轮廓线为5px的红色轮廓，填充色为牛油果绿--> <!-- 椭圆元素 --> <ellipse cx="400" cy="220" rx="100" ry="200" style="fill:pink;stroke-width:2;stroke:black;fill-opacity:0.7;stroke-opacity:0.9"/> <!-- cx和cy - 绘制椭圆的圆心坐标值 rx和ry- 绘制椭圆的水平方向/垂直方向的半径 【注意：当rx和ry的值相同时,绘制的是圆形】 fill-opacity 填充色透明度 stroke-opacity 轮廓线透明度 --> <!-- 圆形元素 --> <circle cx="100" cy="350" r="40" stroke="black" stroke-width="2" fill="red" /> <!-- cx cy表示圆心的x,y坐标。 r表示圆的半径。 --> <!-- 直线元素 --> <line x1="0" y1="0" x2="100" y2="300" style="stroke-width:2;stroke:red;"/> <!-- <line x1="起点坐标" y1="" x2="终点坐标" y2="" /> --> <!-- 注意：绘制直线时,默认描边颜色为白色 --> <!-- 多边形元素:比如三角形 --> <polygon points="10,150 200,150 300,550" style="fill:orange;stroke:orangered;stroke-width:2;"/> <!-- points--折线中所有的点坐标，都设置在该属性中 --> <!-- 曲线元素：折线 --> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke-width:2;stroke:blue;" /> <!-- 特效元素如下 ：注意：线性渐变或射线渐变,设置基准线(圆)的坐标值必须是百分值，允许为负值，允许为大于 100% 的值 设置渐变颜色位置必须是百分值只能是从 0% ~ 100%-----------------------------------------------------------> <!-- 线性渐变------基准线 --> <!-- <defs> <linearGradient id="grad" x1="基准线的起点坐标" y1="" x2="基准线的终点坐标" y2="" > <stop offset="0%~100%" stop-color="颜色" /> </linearGradient> </defs> <rect fill="url(#渐变元素的id)" /> --> <!-- 线性元素 实例--------------------------------------------- --> <defs> <!-- 水平渐变 【垂直渐变：<linearGradient id="grad000" x1="0%" y1="0%" x2="0%" y2="100%" >】 --> <linearGradient id="grad000" x1="0%" y1="0%" x2="100%" y2="0%" > <stop offset="0%" stop-color="red" stop-opacity="0.7" /> <stop offset="100%" style="stop-color:yellow;stop-opacity:1;" /> </linearGradient> </defs> <ellipse cx="800" cy="70" rx="85" ry="55" fill="url(#grad000)" /> <!-- 放射性渐变----------------基准圆 --> <!-- <defs> <radialGradient id="grad" fx="起点基准圆的圆心x" fy="" cx="终点基准圆的圆心" cy="" r="终点基准圆的半径" > <stop offset="0%~100%" stop-color="颜色" /> </radialGradient> </defs> <rect fill="url(#渐变元素的id)" /> --> <!-- 放射性渐变--------------实例------------------------------------------- --> <defs> <radialGradient id="grad111" fx="50%" fy="50%" cx="50%" cy="50%" r="50%" > <stop offset="0%" style="stop-color:teal;stop-opacity:0;" /> <stop offset="100%" style="stop-color:rgb(163, 37, 163);stop-opacity:1;" /> </radialGradient> </defs> <rect x="500" y="300" width="300" height="100" fill="url(#grad111)" /> <!-- svg路径===================【是一个闭环 z关闭后，会回到起点。默认填充黑色】================================================== --> <!-- 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 关闭路径--> <!-- ！！！注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位 --> <path d="M550 0 L475 200 L625 200 Z" fill="none" stroke="red" stroke-width="5"/> <!-- 从150 0位置开始，到75 200，再到225 200,结束 --> <!-- 下面的例子创建了一个二次方贝塞尔曲线，A 和 C 分别是起点和终点，B 是控制点：================================ --> <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" /> <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" /> <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" /> <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" /> <!-- Mark relevant points --> <g stroke="black" stroke-width="3" fill="black"> <circle id="pointA" cx="100" cy="350" r="3" /> <circle id="pointB" cx="250" cy="50" r="3" /> <circle id="pointC" cx="400" cy="350" r="3" /> </g> <!-- Label the points --> <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="100" y="350" dx="-30">A</text> <text x="250" y="50" dy="-10">B</text> <text x="400" y="350" dx="30">C</text> </g> <!-- ================================================================================================= --> <!-- svg文本=============================-旋转黑色文字============================================================= --> <text x="0" y="15" fill="black" transform="rotate(30 20,40)">I love SVG</text> <!-- 路径上的文本----------------------------- --> <defs> <path id="path1" d="M75,20 a1,1 0 0,0 100,0" /> </defs> <text x="0" y="100" style="fill:blue;"> <textPath xlink:href="#path1">I love SVG I love SVG</textPath> </text> <!-- 文本内容分小组--------------------------------------------------- --> <text x="500" y="20" style="fill:red;">Several lines: <tspan x="500" y="45">First line</tspan> <tspan x="500" y="70">Second line</tspan> </text> <!-- 链接文本---------------------------------------------------------> <a xlink:href="https://www.baidu.com" target="_blank"> <text x="800" y="215" fill="black">I love SVG</text> </a> <!-- 滤镜模糊--高斯模糊==============【注意： Internet Explorer和Safari不支持SVG滤镜！】===================================================---> <!-- <filter></filter>滤镜元素 --> <!-- <feGaussianBlur></feGaussianBlur>该标签用于创建模糊效果 --> <!-- 滤镜模糊效果实例------------------------------------------------------------------- --> <defs> <!-- filter定义一个滤镜的唯一名称 x和y表示什么？？？？？？？？？？--> <filter id="f1" x="0" y="0"> <!-- feGaussianBlur定义模糊效果 in="SourceGraphic"表示由整个图像创建效果 stdDeviation定义模糊量 --> <feGaussianBlur in="SourceGraphic" stdDeviation="15" /> </filter> </defs> <rect width="90" height="90" x="500" y="500" stroke="green" stroke-width="25" fill="yellow" filter="url(#f1)" /> <!-- filter="url(#f1)"用来将rect矩形元素链接到#f1滤镜 --> <!-- 阴影效果============实例1================================================== --> <defs> <filter id="ff" x="0" y="0" width="200%" height="200%" > <!-- feOffset元素创建阴影效果 将svg图像在xy屏幕平移 dx dy表示水平/垂直平移量--> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <!-- feBlend混合偏移图像顶部 --> <feBlend in="SourceGraphic" in2="offout" mode="normal" /> </filter> </defs> <rect width="90" x="800" y="450" height="90" stroke="purple" stroke-width="5" fill="yellow" filter="url(#ff)" /> <!-- 阴影效果----------------实例2---------------阴影变模糊----------------------------------------- --> <defs> <filter id="gg" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <!-- <feGaussianBlur>元素的stdDeviation属性定义模糊量 --> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> <!-- 混合 --> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <rect width="90" x="800" y="650" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#gg)" /> <!-- 阴影效果---------------实例3-------------制作黑色阴影---------------------------------- --> <defs> <filter id="kk" x="0" y="0" width="200%" height="200%"> <!-- in="SourceAlpha"表示在Alpha通道使用残影，而不是整个rgba像素 --> <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" /> <!-- 定义模糊量 --> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> <!-- 混合 --> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <rect width="90" x="800" y="800" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#kk)" /> <!-- 阴影效果-------------实例4-------------给阴影设置颜色-------------------------------------------- --> <defs> <filter id="xx" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" /> <!-- <feColorMatrix>过滤器是用来转换偏移的图像使之更接近黑色的颜色。 '0.2'矩阵的三个值都获取乘以红色，绿色和蓝色通道。降低其值带来的颜色至黑色（黑色为0） --> <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" /> <!-- 定义模糊量 --> <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" /> <!-- 混合 --> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <rect width="90" x="850" y="300" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#xx)" /> </svg> </body> </html>
svg绘制扇形
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths
SVG绘制弧形
https://blog.csdn.net/qing_gee/article/details/51500220
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5中的SVG属性实现圆形进度条效果</title> </head> <body> <svg width="500px" height="500px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path id="ring" fill="none" stroke="#fd30ae" /> </svg> <script> var path = document.getElementById('ring'); var r=100; var progress=0.6; //将path平移到我们需要的坐标位置 ring.setAttribute('transform', 'translate('+r+','+r+')'); // 计算当前的进度对应的角度值 var degrees = progress * 360; // 计算当前角度对应的弧度值 var rad = degrees* (Math.PI / 180); //极坐标转换成直角坐标 var x = (Math.sin(rad) * r).toFixed(2); var y = -(Math.cos(rad) * r).toFixed(2); //大于180度时候画大角度弧，小于180度的画小角度弧，(deg > 180) ? 1 : 0 var lenghty = window.Number(degrees > 180); //path 属性 var descriptions = ['M', 0, -r, 'A', r, r, 0, lenghty, 1, x, y]; // 给path 设置属性 path.setAttribute('d', descriptions.join(' ')); </script> </body> </html>
