HTML5——Svg

静看理析 發表於 2019-8-16 18:22:00

一、Svg简介
svg也是html5新增的一个标签，它跟canvas很相似。都可以实现绘图、动画。
但是svg绘制出来的都是矢量图，不像canvas是以像素为单位的，放大会模糊。svg绘制出来的图是不会的
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190816020231713-1769737664.png" alt="">
 
二、svg的基本使用
svg是在html和css里面操作的，不是在js里面
<div class="cnblogs_code">
<pre><body> 　　<svg width="500" height="500"> <svg> </body></pre>
</div>
2.1 绘制直线
<div class="cnblogs_code">
<pre> line{ 　　　　　　　stroke: red; 　　　　　} 　　　　　
 <line x1="100" y1="100" x2="200" y2="200"></line></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815142604516-315861167.png" alt="">
2.2 绘制矩形
<div class="cnblogs_code">
<pre> 
 <rect x="50" y="20" rx="10" ry="10" width="150" height="150"></rect></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815160124576-680678376.png" alt="">
我们来看看加上css样式，空心矩形
<div class="cnblogs_code">
<pre> rect{
 fill:transparent;//设置为透明色
 stroke: red;　　　　//描边为红色
 }</pre>
</div>
 <img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815160323256-880577857.png" alt="">
 
2.3 绘制圆弧
<div class="cnblogs_code">
<pre> 
 
 <circle r="50" cx="200" cy="100"></circle></pre>
</div>
 <img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815142931642-2128463597.png" alt="">
2.4 绘制椭圆
<div class="cnblogs_code">
<pre> 
 
 <ellipse rx="60" ry="30" cx="100" cy="100"></ellipse></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815143403416-1724632727.png" alt="">
2.5 绘制折线
<div class="cnblogs_code">
<pre> 
 
 <polygon points="100 100, 200 50, 300 100, 400 50"></polygon>

 
 
 <polyline points="100 200, 200 150, 300 200, 400 150"></polyline></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815143538326-1673383446.png" alt="">
2.6 绘制文本
<div class="cnblogs_code">
<pre> 
 <text x="400" y=150>123</text></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815143850070-140667496.png" alt="">
三、样式属性
　　fill: 填充色（默认为黑色）
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815145155652-821966139.png" alt="">
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815145210008-1335635321.png" alt="">
 
　　stroke: 线条的颜色（默认为黑色）
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815150023568-191697008.png" alt="">
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815150032598-945791071.png" alt="">
 
　　stroke-width: 线条的宽度
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815150125359-2051890223.png" alt="">
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815150132721-1054712369.png" alt="">
 
　　stroke-linecap: 线条末尾的样式 (默认)butt (圆角)round (方形)square ，round和square会影响线条的长度
　　　默认的样式就不设置了，设置跟设置没上面两样
　　　　round(圆角)
　　　　<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815150940642-1597661084.png" alt="">
　　　　<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815150952626-1164841527.png" alt="">
　　　　square（方形）
　　　　<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815151109324-46067458.png" alt="">
　　　　<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815151447812-269914801.png" alt="">
 　　 stroke-linejoin：可使用的值是:miter, round, bevel, inherit 笔划连接属性定义了路径拐角的形状,"miter"是默认值,"round"光滑连接,"bevel"折线连接,"inherit"继承
　　round
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815154446633-1574982828.png" alt="">
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815154457109-427899743.png" alt="">
　　bevel
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815154600362-330979373.png" alt="">
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815154606934-430562377.png" alt="">
 
　　opacity: 不透明度 0~1（可以设置填充的，也可以描边的）
　　<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815151713813-512668055.png" alt="">
　　<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815151938990-49767213.png" alt="">
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815152103479-1144140355.png" alt="">
用上面所学的知识来做个小demo
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815162901966-816273801.png" alt="">
<div class="cnblogs_code">
<pre><!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>
<style>
 svg {
 margin-left: 100px;
 margin-top: 100px;
 border: 1px solid black;
 }
 rect{
 fill: transparent;
 stroke: black;
 stroke-width: 5px;
 }
 polygon{
 fill: black;
 }
 circle{
 fill: transparent;
 stroke: black;
 stroke-width: 4px;
 }
 .yan{
 fill: black;
 }
 .bi{
 fill: transparent;
 stroke: black;
 stroke-width: 3px;
 }
 ellipse{
 fill: transparent;
 stroke: black;
 stroke-width: 3px;
 }
 text{
 stroke: red;
 }
</style>
</head>
<body>
<svg width="500" height="500">
 <rect x="100" y="100" rx="15" ry="15" width="300" height="300"></rect>
 <polygon points="110 100, 130 60, 190 95, 250 60, 310 95,370 60, 390 100"></polygon>
 <circle r="20" cx="190" cy="200"></circle>
 <circle r="20" cx="320" cy="200"></circle>
 <circle class="yan" r="5" cx="198" cy="208"></circle>
 <circle class="yan" r="5" cx="328" cy="208"></circle>
 <polygon class="bi" points="240 300, 250 260, 270 300"></polygon>
 <ellipse rx="30" ry="10" cx="260" cy="330"></ellipse>
 <text x="200" y="440">屏幕前的你很帅</text>
</svg>
</body>
</html></pre>
</div>
 四、path元素（指令）
moveTo   lineTo
  4.1 M命令和L命令
<div class="cnblogs_code">
<pre><path d = "M 100 100 L 200 100 "></path></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815170417200-1156039525.png" alt="">
4.2 m命令和l命令
<div class="cnblogs_code">
<pre><path d="m 100 100 l 200 100 "></path></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815170750883-1218463142.png" alt="">
 
 大写表示绝对定位，小写表示相对定位
绝对坐标和相对坐标，相对于上个移动距离
 
4.3 H和V命令
<div class="cnblogs_code">
<pre> 
 <path d="M 100 100 H 200 V 200"></path></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815181200003-1453083021.png" alt="">
　　
 大写表示绝对定位，小写表示相对定位
绝对坐标和相对坐标，相对于上个移动距离
 4.4 Z命令
<div class="cnblogs_code">
<pre><path d="M 100 100 H 200 V 200 Z"></path></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815181544053-2122884627.png" alt="">
圆弧指令 
4.5 A命令       可以传7个参数 rx, ry, x-axis-rotaion, large-arc-flag, sweep-flag, x, y
 
rx, ry圆弧的x轴半径和y轴半径
x-axis-rotaion 圆弧的相对x轴的旋转角度，默认是顺时针，可以设置负值
large-arc-flag 表示圆弧路径是大圆弧还是小圆弧，1是大圆弧，0是小圆弧
sweep-flag 表示从起点到终点是顺时针还是逆时针，1表示顺时针，0表示逆时针
x, y 表示终点坐标，绝对或相对
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815213633140-619474121.png" alt="">
 
<div class="cnblogs_code">
<pre><path d="M 100 100 A 70 120 90 1 1 100 200"></path></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815213531816-1425775117.png" alt="">
 如果不懂获取不清楚可以评论找我，或者自己多试试参数研究研究
  五、贝塞尔曲线
   5.1　二次贝塞尔曲线
Q x1, y1, x, y 
T x ,  y
<div class="cnblogs_code">
<pre><path d = "M 100 100 Q 200 50 300 300"></path></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815225607714-435879968.png" alt="">
加上T
<div class="cnblogs_code">
<pre><path d = "M 100 100 Q 200 50 300 300 T 450 200"></path></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815230048675-2032961058.png" alt="">
做个小demo（logo）
<div class="cnblogs_code">
<pre> <path d="M 120 280 Q 80 460 300 310 T 450 200"></path>
 <path d="M 120 280 Q 115 360 280 284 T 450 200"></path></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815230139797-693137606.png" alt="">
5.2  三次贝塞尔曲线 
C ： x1, y1, x2, y2,  x, y
S： x2, y2, x, y  
<div class="cnblogs_code">
<pre> <path d="M 100 100 C 190 140 230 80 280 120 S 250 160 280 120"></path></pre>
</div>
都差不多是一个道理，自己试试就可以懂的
自动生成绘制路径的网站：https://editor.method.ac/
 绘制出自己想要的样式，然后按 ctrl+U 把代码拿出来用
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190815233036471-2010586519.png" alt="">
六、渐变
 6.1 线性渐变
<linearGradient> 可用来定义 SVG 的线性渐变。
<linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可被定义为水平、垂直或角形的渐变：
<ul class=" list-paddingleft-2">
<li>
当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
</li>
<li>
当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
</li>
<li>
当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
</li>
</ul>
<div class="cnblogs_code">
<pre> <svg width="500" height="500">
 <defs>
 <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
 　　<stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
 　　<stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
 </linearGradient>
 </defs>
 <ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/>
</svg></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190816000630680-173495283.png" alt="">
 
6.2径向渐变
<radialGradient> 用来定义径向渐变。
<radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义。
<div class="cnblogs_code">
<pre> <svg width="500" height="500">
 <defs>
 <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
 <stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
 <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
 </radialGradient>
 </defs>
 <ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>
</svg></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190816001203414-921641590.png" alt="">
6.3  高斯模糊
<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜？
<filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。
<div class="cnblogs_code">
<pre> <svg width="500" height="500">
 <defs>
 <filter id="Gaussian_Blur">
 <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
 </filter>
 </defs>
 <ellipse cx="200" cy="150" rx="70" ry="40"style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190816001530490-2031700086.png" alt="">
再举一个例子
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190816001652212-839298152.png" alt="">
 七、路径动画
 stroke-dasharray、stroke-dashoffset
<div class="cnblogs_code">
<pre> line{
 stroke: red;
 stroke-width: 10px;
 stroke-linecap: butt;

 }
</style>
</head>
<body>
<svg width="500" height="500">
 <line x1="100" y1="100" x2="400" y2="100"></line>
</svg>
</body></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190816005325725-698302143.png" alt="">
 
先画出一条直线，方便观察。
再来添加stroke-dasharray：10px
<div class="cnblogs_code">
<pre> line{
 stroke: red;
 stroke-width: 10px;
 stroke-linecap: butt;

 stroke-dasharray: 10px ;
 }
</style>
</head>
<body>
<svg width="500" height="500">
 <line x1="100" y1="100" x2="400" y2="100"></line>
</svg>
</body></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190816005709107-127292906.png" alt="">
再来添加stroke-dasharray：10px 20px;
 <img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190816005913664-362433635.png" alt="">
再来添加stroke-dasharray：10px 20px 30px;
 <img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190816010031531-689104067.png" alt="">
依此类推添加，就不再多写了，可以自己试试
接着再来设置添加一下  stroke-dashoffset （偏移量）属性
随着偏移量增加可以无限循环播放
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190816010947014-1489871389.gif" alt="">
做个小demo
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190816021005907-1805188126.gif" alt="">
<div class="cnblogs_code">
<pre><!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>
<style>
 svg {
 margin-left: 100px;
 margin-top: 100px;
 border: 1px solid black;
 }

 line{
 stroke: red;
 stroke-width: 10px;
 stroke-linecap: butt;

 stroke-dasharray: 300px;
 stroke-dashoffset: 300px;
 animation: move 1s linear infinite alternate-reverse;
 }
 @keyframes move{
 0%{
 stroke-dashoffset: 300px;
 }
 100%{
 stroke-dashoffset: 0;
 }
 }
</style>
</head>
<body>
<svg width="500" height="500">
 <line x1="100" y1="100" x2="400" y2="100"></line>
</svg>
</body>
</html></pre>
</div>
 八、JS操作Svg
8.1
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190816023238134-584303010.png" alt="">
获取路径总长度
 
<div class="cnblogs_code">
<pre> line{
 stroke: red;
 stroke-width: 10px;
 stroke-linecap: butt;
 stroke-dasharray: 300px;
 stroke-dashoffset: 300px;
 }
</style>
</head>
<body>
<svg width="500" height="500">
<line x1="100" y1="100" x2="400" y2="100"></line>
</svg>
<script>
 var svg = document.getElementsByTagName('svg')[0];
 var line = document.getElementsByTagName('line')[0];
 console.log(line.getTotalLength( ));
</script></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190816024225901-817324523.png" alt="">
获取路径上距离起点距离与x长度点距离
<div class="cnblogs_code">
<pre> line{
 stroke: red;
 stroke-width: 10px;
 stroke-linecap: butt;
 stroke-dasharray: 300px;
 stroke-dashoffset: 300px;
 }
</style>
</head>
<body>
<svg width="500" height="500">
<line x1="100" y1="100" x2="400" y2="100"></line>
</svg>
<script>
 var svg = document.getElementsByTagName('svg')[0];
 var line = document.getElementsByTagName('line')[0];
 console.log(line.getPointAtLength(50));
</script></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190816024559603-651845619.png" alt="">
 
8.2
　　1. 创建svg元素需要指定命名空间
　　2.  svg元素对象一般通过调用setAttribute()方法来设定属性值
<div class="cnblogs_code">
<pre> <style>
 svg {
 border: 1px solid red;
 }

 line {
 stroke: red;
 stroke-width: 10px;
 }
</style>
</head>

<body>
<script>
 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
 var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
 svg.setAttribute('width', 200);
 svg.setAttribute('height', 200);
 line.setAttribute('x1', 100);
 line.setAttribute('y1', 100);
 line.setAttribute('x2', 150);
 line.setAttribute('y2', 100);

 svg.appendChild(line);
 document.body.appendChild(svg);
</script></pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1646536/201908/1646536-20190818134845083-1334083944.png" alt="">
  
来源：https://www.cnblogs.com/yangpeixian/p/11359676.html

頁: [1]

琼殿技术论坛's Archiver

HTML5——Svg