skyGAYD 2019-11-18
矢量图,缩放不变形。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>svg基础</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"> <rect x="10" y="10" width="50" height="50" rx="5" ry="5" fill="#000"/> <circle cx="35" cy="100" r="20" /> <ellipse cx="35" cy="160" rx="30" ry="20" /> <line x1="10" y1="200" x2="200" y2="200" style="stroke:rgb(99,99,99);stroke-width:5" /> <polyline points="10,250 500,250 80,300" style="stroke-width:1" /> </svg> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <div id="canvas"></div> <script> var SVG_NS = 'http://www.w3.org/2000/svg'; var canvas = document.getElementById('canvas'); function createSVG(){ var svg = document.createElementNS(SVG_NS, 'svg'); svg.setAttribute('width', '800'); svg.setAttribute('height', '800'); var circle = document.createElementNS(SVG_NS, 'circle'); circle.setAttribute('cx', '35'); circle.setAttribute('cy', '50'); circle.setAttribute('r', '20'); circle.setAttribute('stroke-width', '5'); svg.appendChild(circle); canvas.appendChild(svg); return svg; }; createSVG() </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>svg</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"> <!-- 简单点线命令 --> <!-- <path d="M10 10 H 90 V 90 H 10 L 10 10 " /> --> <!-- 三次贝塞尔曲线需要定义一个点和两个控制点 --> <!-- <path d="M10 110 C 0 140, 60 140, 50 110" stroke="black" fill="transparent"/> --> <!-- 三次贝塞尔曲线简写 --> <!-- <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/> --> <!--二次贝塞尔曲线只需要一个控制点,用来确定起点和终点的曲线斜率--> <!-- <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> --> <!-- 二次贝塞尔曲线简写 --> <!-- <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/> --> <!-- 弧形 --> <!-- x轴半径,y轴半径,旋转情况,弧线角度,弧线方向, --> <path d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> </svg> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>svg</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"> <text x="20" y="90" dx="10 20 20 60" dy="10" style="font-size: 50px;font-family:'Arial'">SVGA文本插入</text> <path d="M30,0 V200,M0,100H200" stroke="red"></path> </svg> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>svg动画</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="10000" height="1000"> <rect x="100" y="100" width="100" height="100" fill="red"> <animate id="goright" attributeType="XML" attributeName="x" begin="0;goleft.end" form="100" to="500" dur="2s" fill="freeze" ></animate> <animate id="goleft" attributeType="XML" attributeName="x" begin="goright.end" form="500" to="100" dur="2s" fill="freeze" ></animate> </rect> </svg> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>svg动画</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" > <rect x="200" y="0" width="100" height="100" fill="red"> <animateTransform id="rotate" attributeName="transform" attributeType="XML" type="rotate" form="0" to="60" dur="2s" fill="freeze" ></animate> </rect> </svg> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>svg动画</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="10000" height="1000" viewBox="-400 -400 800 800" > <rect x="-25" y="-25" width="100" height="100" fill="rgba(0,255,255,.6)" > <!-- <animateMotion path="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" dur="3s" rotate="auto" > </animateMotion> --> <animateMotion dur="3s" rotate="auto" > <mpath xlink:href="#motion-path"></mpath> </animateMotion> </rect> <path id="motion-path" d="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" stroke="red" fill="none" ></path> </svg> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>svg</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000"> <defs> <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <path stroke="#F0F0F0" fill="none" d="M0,0H20V20"></path> </pattern> </defs> <rect width="1200" height="1000" fill="url(#grid)"></rect> <text id="sintext" x="100" y="160" style="font-size: 14px;font-family:'Arial'">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text> <path d="M100,0 V200M0,100H200" transform="translate(0,60)" stroke="red"></path> </svg> <script> var n = 26; var x = []; var y = null; var i = n; var s = 100; var w = 0.02; var t = 0; while(i--) x.push(10); function arrange(t){ y = []; var ly = 0, cy; for(i=0;i<n;++i){ cy = -s*Math.sin(w*i*20+t); y.push(cy-ly); ly = cy; } } //渲染函数 function render(){ sintext.setAttribute('dx',x.join(' ')); sintext.setAttribute('dy',y.join(' ')); } //动画函数 function frame(){ t+=0.02; arrange(t); render(); requestAnimationFrame(frame); }; frame() </script> </body> </html>
vector.js (function(){ function Vector(x,y){ this.x = x || 0; this.y = y || 0; } Vector.prototype = { constructor:Vector, square:function(){ return this.x * this.x + this.y * this.y; }, length:function(){ return Math.sqrt(this.square()); }, add:function(q){ return new Vector(this.x + q.x,this.y+q.y); }, minus:function(q){ return new Vector(this.x - q.x,this.y-q.y); }, multipy:function(scale){ return new Vector(this.x*scale,this.y*scale); }, normalize:function(length){ if(length === undefined){ length = 1; } return this.multipy(length / this.length()); } }; Vector.fromPoints = function(p1,p2){ return new Vector(p2.x - p1.x, p2.y - p1.y); }; window.Vector = Vector; })();
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>svg动画</title> <style> html,body,svg{ margin:0; padding:0; width: 100%; height:100%; } </style> </head> <body> <svg width="10000" height="1000" viewBox="-400 -400 800 800" > <path id="links" stroke="gray" fill="none" ></path> </svg> <script src="vector.js"></script> <script> var points = 'a,b,c'.split(',').map(function(name,index,arr){ return { name:name, color:'hsl('+ (360*index/arr.length) + ',100%,60%)' }; }); var relation = 300; var svg = document.querySelector('svg'); var k = 0.05; var Vector = window.Vector; function random(min,max){ return Math.round(min +(max - min) *Math.random()); }; points.forEach(function(point){ var circle = document.createElementNS('http://www.w3.org/2000/svg','circle'); var x = random(-400,400); var y = random(-400,400); circle.setAttribute('cx',x); circle.setAttribute('cy',y); circle.setAttribute('r',10); circle.setAttribute('fill',point.color); svg.appendChild(circle); point.circle = circle; point.s = new Vector(x,y); point.v = new Vector(); point.a = new Vector(); }); var lastFrameTime = +new Date(); function update(){ var frameTime = +new Date(); var t = frameTime - lastFrameTime; t/=200; //点位置更新 points.forEach(function(pa){ var f = new Vector(); //计算合力 points.forEach(function(pb){ if(pa == pb) return; var x = Vector.fromPoints(pa.s,pb.s); var delta = x.length() -relation; //f = k * x f = f.add(x.normalize(delta * k)); }); pa.a = f; pa.v = pa.v.add(pa.a.multipy(t)).multipy(0.98); pa.s = pa.s.add(pa.v.multipy(t)); pa.circle.setAttribute('cx',pa.s.x); pa.circle.setAttribute('cy',pa.s.y); }); //连线更新 var linkPath = []; points.forEach(function(pa){ var sa = pa.s; points.forEach(function(pb){ if(pa == pb) return; var sb = pb.s; linkPath = linkPath.concat([ 'M',sa.x,sa.y, 'L',sb.x,sb.y ]); }); }); document.getElementById('links').setAttribute('d',linkPath.join(' ')) lastFrameTime = frameTime; window.requestAnimationFrame(update); }; window.requestAnimationFrame(update); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta name="description" content="满天星与灯塔"> <meta charset="utf-8"> <title>图案处理/title> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #001122; line-height: 0; font-size: 0; } </style> </head> <body> <svg id='svg' width="100%" height="100%" viewBox="-400 -300 800 600" preserveAspectRatio="xMidYMid slice"> <defs> <polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="white"></polygon> </defs> <g id="star-group"></g> <g id="moon-group"> <mask id="moon-mask"> <circle cx="-250" cy="-150" r="100" fill="white"></circle> <circle cx="-200" cy="-200" r="100" fill="black"></circle> </mask> <circle cx="-250" cy="-150" r="100" fill="white" mask="url(#moon-mask)"></circle> </g> <g id="light-tower" transform="translate(250,0)"> <defs> <linearGradient id="tower" x1="0" y1="0" x2="1" y2="0"> <stop offset="0" stop-color="#999"></stop> <stop offset="1" stop-color="#333"></stop> </linearGradient> <radialGradient id="light" cx="0.5" cy="0.5" r="0.5"> <stop offset="0" stop-color="rgba(255,255,255,.8)"></stop> <stop offset="1" stop-color="rgba(255,255,255,0)"></stop> </radialGradient> <clipPath id="light-mask"> <polygon points="0 0 -400 -15 -400 15" fill="rgba(255,0,0,0.5)"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="7s" repeatCount="indefinite"></animateTransform> </polygon> <circle cx="0" cy="0" r="2"></circle> </clipPath> </defs> <polygon points="0 0 5 50 -5 50" fill="url(#tower)"></polygon> <ellipse cx="0" cy="0" rx="300" ry="100" fill="url(#light)" clip-path="url(#light-mask)"></ellipse> </g> </svg> <script> var paper = document.getElementById('svg'); var SVG_NS = 'http://www.w3.org/2000/svg'; var XLINK_NS = 'http://www.w3.org/1999/xlink'; renderStar(); function use(origin) { var _use = document.createElementNS(SVG_NS, 'use'); _use.setAttributeNS(XLINK_NS, 'xlink:href', '#' + origin.id); return _use; } function random (min, max) { return min + (max - min) * Math.random(); } function renderStar() { var starRef = document.getElementById('star'); var starGroup = document.getElementById('star-group'); var starCount = 500; while(starCount--){ star = use(starRef); star.setAttribute('opacity', random(0.1, 0.4)); star.setAttribute('transform', 'translate(' + random(-400, 400) + ',' + random(-300, 50) + ')' + ' scale(' + random(0.1, 0.6) + ')'); starGroup.appendChild(star); } } </script> </body> </html>
这篇是对慕、课、网svg教程的笔记,链接贴在下面,大家可以去看看:
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
一个客户要求给网站添加一个背景音乐,我用的是html5添加网页背景音乐的代码,在此记录一下以后有用。html5方法二:<videocontrols=""autoplay=""name="media&q