Table of contents:
1 Encounter with SVG and First Experience
2 Grid and coordinate system
3 Viewports and view boxes
4 Drawing shapes and paths
5 Drawing text and pictures
6 SVG grouping and multiplexing
7 Padding and edges
The problem of performance optimization encountered in the previous use of canvas is that 60 frames of animation are required per second, and 60 redraws of graphics will affect performance. Therefore, the graphics that need to be moved need to be drawn separately from the graphics that will not move. Only the moving graphics Use requsetAnimationFrame(), do not use requsetAnimationFrame() for graphics that will not move. Or graphics that don't move can be drawn directly with div.
When using canvas to draw, use Gaussian blur, gradient, blur, and transparency changes as little as possible
If standalone selects yes, the internal DTD statement is used, and the internal DTD statement is written as follows:
If no is selected by standalone, the external DTD declaration is used, and the external DTD declaration is written as follows:
The way to create svg:
1. Create a text file directly and change the suffix to svg to create an svg file, using the 1.0 version:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?> <!-- 下面这个文档头是由上面xml设置的standalone='no'才写的，它主要是用来规范下面 svg标签内容是否符合规范语法的。这个文档头是固定写法的。--> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- version="1.0" baseProfile="full" 正确渲染svg内容时所需要最小SVG语言概述(版本); full:正常的svg语言概述 basic:基本SVG语言概述 tiny: 轻量级SVG语言概述 xmlns: 指定svg元素 和 svg内的子元素都是属于 http://www.w3.org/2000/svg 这个命名空间下 --> <svg version="1.0" baseProfile="full" width="100" height="100" xmlns="http://www.w3.org/2000/svg" > <rect x="0" y="0" width="100" height="100"></rect> <title>我是svg title</title> </svg>2. Directly create a text file and change the suffix to svg to create an svg file, using version 2.0:
<?xml version="1.0" standalone="no" ?> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" > <rect x="0" y="0" width="100" height="100"></rect> </svg>3. How to create svg in the body of the html file:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 1.创建svg 1.0 --> <svg version="1.0" baseProfile="full" width="100" height="100" xmlns="http://www.w3.org/2000/svg" > <rect x="0" y="0" width="100" height="100"></rect> </svg> <!-- 2.创建svg 2.0 --> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" > <rect x="0" y="0" width="100" height="100"></rect> </svg> <!-- 3.创建svg 2.0 简写 xmlns="http://www.w3.org/2000/svg" 这个命名空间浏览器的解析器会自动添加 默认w 300px h: 150px --> <svg> <rect x="0" y="0" width="100" height="100"></rect> </svg> </body> </html>4. How to create svg in html js:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 1.创建svg 2.0 --> <!-- <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" > <rect x="0" y="0" width="100" height="100"></rect> </svg> --> <script> /** * * jQuery -> Snap.svg */ window.onload = function() { // 1.创建svg 和 rect 元素 let xmlns = 'http://www.w3.org/2000/svg' let svgEl = document.createElementNS(xmlns, 'svg') let rectEl = document.createElementNS(xmlns, 'rect') // 2.给svg 和 rect 元素对象添加属性 svgEl.setAttributeNS(null, 'version', '1.0') svgEl.setAttributeNS(null, 'width', 100) svgEl.setAttributeNS(null, 'height', 100) rectEl.setAttributeNS(null, 'width', 50) rectEl.setAttributeNS(null, 'height', 50) // 3.将svg添加到 body上 svgEl.appendChild(rectEl) document.body.appendChild(svgEl) } </script> </body> </html>How to use svg: 6 types in total
1. Use svg in the img tag
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 在img中直接使用svg --> <img src="./rect.svg" alt=""> </body> </html>Second, use in background-image is used in css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-image: url(./rect.svg); background-repeat: no-repeat; } </style> </head> <body> <div class="box"></div> </body> </html>3. Embed the svg code directly in the html file, and write the svg content directly into the body of the html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" > <rect x="0" y="0" width="100" height="100"></rect> </svg> </body> </html>svg coordinate system:
1. Coordinate system
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, ul{ margin: 0; padding: 0; } body{ background-image: url(../images/grid.png); } svg{ background-color: rgba(255, 0, 0, 0.1); } </style> </head> <body> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <!-- 正方形的xy轴坐标分别为10像素 --> <rect x="10" y="10" width="100" height="100"></rect> </svg> </body> </html>Why does svg have two coordinate systems, because the separation of the viewport coordinate system and the user coordinate system is beneficial for the user to zoom graphics into the viewport; canvas has only one coordinate system, and the coordinate system is enlarged, and the graphics will not become larger.
viewport和viewBox:
1. Specify the size of the viewport (the size of the canvas) viewport
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, ul{ margin: 0; padding: 0; } body{ background-image: url(../images/grid.png); } svg{ background-color: rgba(255, 0, 0, 0.1); } </style> </head> <body> <!-- 通过给svg设置 width 和 height 来指定视口的大小(画布的大小) 下面指定视口的大小为: 300 * 300 --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <rect x="10" y="10" width="100" height="100"></rect> </svg> </body> </html>2. viewport and viewBox have the same aspect ratio
viewport: viewbox scale is
400:400 1:1
100:100 1:1
1px -- "4px The graphics in the viewbox look like this, but they will be scaled proportionally when placed in the viewport.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, ul{ margin: 0; padding: 0; } body{ background-image: url(../images/grid.png); } svg{ background-color: rgba(255, 0, 0, 0.1); } </style> </head> <body> <svg width="400" height="400" viewBox="0 0 100 100" > <circle cx="50" cy="50" r="50"></circle> </svg> </body> </html>3. The viewport and viewBox have the same aspect ratio - specify the minimum x and y of the viewBox. Refers to <svg width="400" height="400" viewBox=" 50 50 100 100">,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, ul{ margin: 0; padding: 0; } body{ background-image: url(../images/grid.png); } svg{ background-color: rgba(255, 0, 0, 0.1); } </style> </head> <body> <svg width="400" height="400" viewBox="50 50 100 100" > <circle cx="50" cy="50" r="50"></circle> </svg> </body> </html>4. Different aspect ratios of viewport and viewBox
When the ratio is different here, the graphics will be zoomed and displayed in the center.
You can force scaling by setting preserveAspectRatio='none':
You can set preserveAspectRatio='xMinyMin' to put the graphics on the coordinate origin of the viewport:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, ul{ margin: 0; padding: 0; } body{ background-image: url(../images/grid.png); } svg{ background-color: rgba(255, 0, 0, 0.1); } </style> </head> <body> <svg width="400" height="400" viewBox="0 0 200 100" preserveAspectRatio="xMinYMin" > <circle cx="50" cy="50" r="50"></circle> </svg> </body> </html>Five, svg basic graphics:
1. Rectangle, circle, ellipse
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, ul{ margin: 0; padding: 0; } body{ background-image: url(../images/grid.png); } svg{ background-color: rgba(255, 0, 0, 0.1); } </style> </head> <body> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <rect x="0" y="0" width="100" height="50"></rect> //4个角弧度 <rect x="100" y="100" width="100" height="50" rx="20" ry="20"></rect> //从150 200为圆心画圆 <circle cx="150" cy="200" r="50" fill="red"></circle> //椭圆圆心为xy轴坐标 <ellipse cx="250" cy="200" rx="25" ry="50" fill="red"></ellipse> </svg> </body> </html>
2. Straight line <line></line>, discounted <polyline></polyline>, polygon, path <path></path>, path-command
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, ul{ margin: 0; padding: 0; } body{ background-image: url(../images/grid.png); } svg{ background-color: rgba(255, 0, 0, 0.1); } </style> </head> <body> <!-- 直线 --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <!-- 线、边框是用stroke , 而不是 fill --> <line x1="100" y1="100" x2="200" y2="100" stroke="red" stroke-width="5"></line> </svg> <!-- 折现 --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <!-- 第1种写法 --> <!-- <polyline points="20 0, 80 50, 20, 100"></polyline> --> <polyline points="20 0, 80 50, 20, 100" fill="transparent" stroke="red"></polyline> <!-- 第2种写法 --> <!-- <polyline points="20 0 80 50 20 100"></polyline> --> <!-- 第3种写法 --> <!-- <polyline points="20 ,0 ,80 ,50 ,20, 100"></polyline> --> </svg> <!-- 多边形 --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <!-- fill="transparent"是透明色 --> <polygon points="20 0, 80 50, 20 100" fill="transparent" stroke="red"></polygon> </svg> <!-- 路径 --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <!-- 1.使用path 绘制一个三角形 --> <!-- <path d="M 20 0, 80 50, 20 100" fill="transparent" stroke="red"></path> --> <!-- 1.使用path 绘制一个闭合的三角形 --> <!-- <path d="M 20 0, 80 50, 20 100 Z" fill="transparent" stroke="red"></path> --> <!-- 1.使用 path 绘图的命令: M moveTo Z close path L lineTo --> <path d="M 20 0,L 80 50,L 20 100 Z" fill="transparent" stroke="red"></path> </svg> <!-- 路径-命令 --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <path d="M 20 0,L 80 50,l 20 50 Z" fill="transparent" stroke="red"></path> </svg> </body> </html>
Sixth, svg draws pictures and text:
1. Draw pictures, text <image></image><text></text>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, ul{ margin: 0; padding: 0; } body{ background-image: url(../images/grid.png); } svg{ background-color: rgba(255, 0, 0, 0.1); } </style> </head> <body> <!-- 绘制图片 --> <!-- svg 2.0版本的语法 --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <image x="0" y="0" href="../images/googlelogo_color_92x30dp.png" width="100" height="100" > </image> </svg> <!-- svg 1.0版本的语法 --> <svg version="1.0" baseProfile="full" width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <image x="0" y="0" xlink:href="../images/googlelogo_color_92x30dp.png" width="100" height="100" > </image> </svg> <!-- svg 2.0 + 1.0 版本的语法( 为了兼容以前的浏览器的写法 ) --> <svg version="1.0" baseProfile="full" width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <image x="0" y="0" xlink:href="../images/googlelogo_color_92x30dp.png" href="../images/googlelogo_color_92x30dp.png" width="100" height="100" > </image> </svg> <!-- 绘制文字 --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <!-- 1.在svg中绘制一个文字 --> <!-- <text x="100" y="100" font-size="50" fill="red">Ay</text> --> <!-- 2.文本的对齐方式 --> <!-- <text x="100" y="100" text-anchor="middle" font-size="50" fill="red">Ay</text> --> <!-- 3.基线对齐方式 : 有 auto 、middle 或 hanging 值, 默认值：auto --> <text x="100" y="100" dominant-baseline="middle" font-size="50" fill="red">Ay</text> </svg> <!-- 绘制文字-tspan 文字可以嵌套，使用tspan标签做到嵌套文字 --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <!-- 1.在svg中绘制一个文字 --> <text x="40" y="100" font-size="20"> iPhone14 <tspan fill="red">¥100</tspan> </text> </svg> </body> </html>7. Combination and reuse of svg:
1. Combination of graphics <g></g>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, ul{ margin: 0; padding: 0; } body{ background-image: url(../images/grid.png); } svg{ background-color: rgba(255, 0, 0, 0.1); } </style> </head> <body> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <!-- <circle cx="50" cy="50" r="25" fill="transparent" stroke="red"></circle> <circle cx="80" cy="50" r="25" fill="transparent" stroke="red"></circle> <circle cx="110" cy="50" r="25" fill="transparent" stroke="red"></circle> <circle cx="140" cy="50" r="25" fill="transparent" stroke="red"></circle> --> <!-- g 元素没有专有的属性,只有全局的属性 全局属性:id class style fill stroke onclick --> <g fill="transparent" stroke="red"> <circle cx="50" cy="50" r="25"></circle> <circle cx="80" cy="50" r="25"></circle> <circle cx="110" cy="50" r="25"></circle> <circle cx="140" cy="50" r="25"></circle> </g> </svg> </body> </html>
2. Reuse and definition of graphics Reusable graphics defs (Width and height cannot be used to change the size of graphics in use of multiplexing graphics defined by defs). The graphics that are defined for reuse will not be displayed directly, but will be displayed only when they are reused
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, ul{ margin: 0; padding: 0; } body{ background-image: url(../images/grid.png); } svg{ background-color: rgba(255, 0, 0, 0.1); } </style> </head> <body> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- 0.样式 --> <style> rect{ fill: green; } </style> <!-- 1.定义了一个矩形 --> <rect id="rectangle" x="0" y="0" width="100" height="50"></rect> <!-- 2.定义了一个组合图形 --> <g fill="transparent" stroke="red"> <circle cx="50" cy="50" r="25"></circle> <circle cx="80" cy="50" r="25"></circle> <circle cx="110" cy="50" r="25"></circle> <circle cx="140" cy="50" r="25"></circle> </g> <!-- 定义渐变 --> <!-- 滤镜 --> </defs> <!-- 在这里进行图形的复用 --> </svg> </body> </html>
3. Reuse graphics, the reuse graphics defined above, now use them use
<use href='Define the id of the graphic'></use>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, ul{ margin: 0; padding: 0; } body{ background-image: url(../images/grid.png); } svg{ background-color: rgba(255, 0, 0, 0.1); } </style> </head> <body> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- 0.样式 --> <style> rect{ fill: green; } </style> <!-- 1.定义了一个矩形 --> <rect id="rectangle" x="0" y="0" width="100" height="50"></rect> <!-- 2.定义了一个组合图形 --> <g id="logo" fill="transparent" stroke="red"> <circle cx="50" cy="50" r="25"></circle> <circle cx="80" cy="50" r="25"></circle> <circle cx="110" cy="50" r="25"></circle> <circle cx="140" cy="50" r="25"></circle> </g> <!-- 定义渐变 --> <!-- 滤镜 --> </defs> <!-- 在这里进行图形的复用 --> <!-- <use href="#rectangle"></use> --> <!-- <use x="100" y="100" href="#rectangle"></use> --> <!-- <use href="#logo"></use> --> <!-- <use x="100" y="100" href="#logo"></use> --> </svg> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <!-- 他的宽和高是没有生效的 ???? 只用use引用的图形是 svg 或 symbol 才会起作用 --> <use href="#rectangle" width="200" height="100" ></use> </svg> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <use href="#logo"></use> </svg> </body> </html>
4. Make icon icon - no symbol is used
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, ul{ margin: 0; padding: 0; } body{ background-image: url(../images/grid.png); } svg{ background-color: rgba(255, 0, 0, 0.1); } </style> </head> <body> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" > <path d="M 80 0,L 20 50, L 80 100 Z"></path> </svg> <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" > <polygon points="20 0, 80 50, 20 100"></polygon> </svg> </body> </html>
5. Make icon icon - use symbol Use the multiplex graphics defined by symbol to use width and height to change the size of the graphics
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, ul{ margin: 0; padding: 0; } body{ background-image: url(../images/grid.png); } svg{ background-color: rgba(255, 0, 0, 0.1); } </style> </head> <body> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <!-- 1.ICON previous--> <symbol id="previous" viewBox="0 0 100 100"> <path fill="currentColor" d="M 80 0,L 20 50, L 80 100 Z"></path> </symbol> <!-- 2.ICON next --> <symbol id="next" viewBox="0 0 100 100"> <polygon points="20 0, 80 50, 20 100"></polygon> </symbol> <!-- 复用 --> <!-- <use href="#previous" width="100" height="100"></use> --> </svg> <!-- 复用 --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <!-- 直接在use上指定ICON的 width和 hegiht --> <use href="#previous" width="50" height="50"></use> </svg> <!-- 这个属于缩小 --> <svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" > <use href="#previous" ></use> </svg> <!-- 属于放大 --> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" > <use href="#previous" ></use> </svg> </body> </html>
6. To make a sprite map, in fact, it is almost the use of symbols, which is the technology of picture splicing and multiplexing
Ali vector graphics are used here. When downloading, select the svg file, and then directly copy the content of the svg file to the html file (very messy, but it was originally wrapped by <svg></svg>). Then you can format the content through web tools (it will be branched and organized)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 这就是一张SVG精灵图: App.vue 的template中 --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display:none;"> <symbol id="music" viewBox="0 0 1024 1024"> <path fill="#d81e06" d="M512 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512zm0-992a480 480 0 1 0 480 480A480 480 0 0 0 512 32zm128 640a80 80 0 1 1 48-143.634V416l-224 64v192h-1.61A80.549 80.549 0 1 1 432 592.366V384a32 32 0 0 1 32-32l224-64a32 32 0 0 1 32 32v288h-1.61A80.018 80.018 0 0 1 640 672zm-256-64a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm304-288l-224 64v64l224-64v-64zm-48 224a48 48 0 1 0 48 48 48 48 0 0 0-48-48z"/> </symbol> <symbol id="music_1" viewBox="0 0 1024 1024"> <path fill="#d81e06" d="M512 56.89c251.351 0 455.11 203.759 455.11 455.11S763.352 967.11 512 967.11 56.89 763.352 56.89 512 260.648 56.89 512 56.89zm30.037 170.665h-3.185c-13.767 0-24.576 10.468-26.226 23.666-.057.683-.285 1.195-.341 1.878-.058.455-.285.853-.285 1.308v341.618c-14.962-7.964-31.687-12.914-49.778-12.914h-71.111c-58.88 0-106.666 47.787-106.666 106.667S332.23 796.445 391.11 796.445h71.111c58.88 0 106.667-47.787 106.667-106.667 0-2.447-.569-4.722-.74-7.111h.74V305.265l76.345 44.089a28.327 28.327 0 0 0 14.165 3.811c9.842 0 19.4-5.12 24.633-14.222 7.907-13.597 3.243-31.005-10.354-38.912l-116.451-67.186c-4.38-3.072-9.387-5.29-15.19-5.29zM462.223 640c27.42 0 49.777 22.357 49.777 49.778s-22.357 49.777-49.778 49.777h-71.111c-27.42 0-49.777-22.357-49.777-49.776 0-27.422 22.357-49.779 49.777-49.779h71.111z"/> </symbol> <symbol id="shouye" viewBox="0 0 1024 1024"> <path fill="#d81e06" d="M981.638 396.91c-.5-.64-1.057-1.196-1.613-1.78L638.747 62.002C605.173 22.225 560.25.362 512.1.362h-.14c-48.26.027-93.267 22.002-126.842 61.946L43.73 394.824a33.308 33.308 0 0 0-1.67 1.78C-5.504 453.822 2.674 495.046 11.77 514.545c9.123 19.5 35.549 52.211 109.93 52.211h38.47v433.962c0 12.85 10.375 23.254 23.198 23.254h654.684c12.823 0 23.198-10.403 23.198-23.254v-430.15c0-12.824-10.375-23.227-23.198-23.227-12.824 0-23.2 10.403-23.2 23.226v406.924H679.249c.139-1.112.64-2.086.64-3.226V756.88c0-90.069-53.547-152.961-130.236-152.961h-75.744c-71.794 0-130.18 58.47-130.18 130.319v240.027c0 1.14.473 2.114.64 3.226H206.566V543.53c0-12.851-10.376-23.255-23.199-23.255H121.7c-35.049 0-60.445-9.513-67.9-25.452-7.343-15.744 1.307-40.945 23.171-67.565l341.333-332.46c.584-.584 1.14-1.168 1.641-1.808 24.73-29.736 57.413-46.147 92.072-46.175h.084c34.52 0 67.148 16.3 91.821 45.924.5.585 1.057 1.197 1.614 1.753l341.194 333.072c21.891 26.62 30.598 51.766 23.282 67.399-7.427 15.855-32.768 25.312-67.844 25.312-12.823 0-23.199 10.404-23.199 23.255 0 12.823 10.376 23.226 23.2 23.226 74.408 0 100.75-32.628 109.873-52.072 9.068-19.443 17.219-60.584-30.403-117.774zM390.125 974.265V734.238c0-46.23 37.58-83.838 83.783-83.838h75.744c50.152 0 83.838 42.781 83.838 106.48v217.385c0 1.14.5 2.114.667 3.226h-244.7c.168-1.112.668-2.086.668-3.226z"/> </symbol> <symbol id="touxiang-kong" viewBox="0 0 1024 1024"> <path fill="#d81e06" d="M512 134.092c-208.758 0-377.908 169.15-377.908 377.908S303.242 889.908 512 889.908 889.908 720.758 889.908 512 720.758 134.092 512 134.092zm0 31.432c190.952 0 346.476 155.342 346.476 346.476 0 84.484-30.342 161.883-80.669 222.02-36.337-14.898-119.731-43.786-168.786-58.32-4.36-1.272-4.906-1.636-4.906-19.441 0-14.717 5.996-29.615 11.991-42.333 6.541-13.626 13.99-36.7 16.715-57.413 7.631-8.902 18.17-26.344 24.71-59.775 5.814-29.433 3.088-40.152-.727-50.145-.363-1.09-.908-2.18-1.09-3.089-1.454-6.904.545-42.696 5.632-70.494 3.452-19.077-.908-59.593-27.071-93.205-16.534-21.258-48.329-47.239-106.287-50.872h-31.795c-57.05 3.633-88.663 29.614-105.378 50.872-26.344 33.612-30.705 74.128-27.253 93.205 5.087 27.798 7.086 63.59 5.632 70.494-.363 1.272-.726 2.18-1.09 3.27-3.815 9.993-6.722 20.713-.726 50.146 6.722 33.43 17.078 50.872 24.709 59.775 2.725 20.712 10.356 43.605 16.715 57.413 4.724 9.993 6.904 23.619 6.904 42.878 0 17.987-.727 18.168-4.724 19.44-51.054 15.08-131.904 44.15-164.244 58.14-50.69-60.32-81.214-137.9-81.214-222.566 0-190.952 155.524-346.476 346.476-346.476z"/> </symbol> <symbol id="Video" viewBox="0 0 1024 1024"> <path fill="#d81e06" d="M39.385 1024V0h945.23v1024H39.385zM196.923 78.77h-78.77v78.768h78.77V78.77zm0 157.538h-78.77v78.769h78.77v-78.77zm0 157.538h-78.77v78.77h78.77v-78.77zm0 157.539h-78.77v78.769h78.77v-78.77zm0 157.538h-78.77v78.77h78.77v-78.77zm0 157.539h-78.77v78.769h78.77v-78.77zM748.308 78.769H275.692v393.846h472.616V78.77zm0 472.616H275.692V945.23h472.616V551.385zM905.846 78.769h-78.77v78.77h78.77v-78.77zm0 157.539h-78.77v78.769h78.77v-78.77zm0 157.538h-78.77v78.77h78.77v-78.77zm0 157.539h-78.77v78.769h78.77v-78.77zm0 157.538h-78.77v78.77h78.77v-78.77zm0 157.539h-78.77v78.769h78.77v-78.77z"/> </symbol> <symbol id="video_1" viewBox="0 0 1024 1024"> <path fill="#d81e06" d="M239.787 393.813c97.393 0 176.611-79.203 176.611-176.583S337.18 40.633 239.787 40.633c-97.366 0-176.583 79.218-176.583 176.597 0 97.38 79.203 176.583 176.583 176.583zm0-296.291c66.02 0 119.722 53.703 119.722 119.708s-53.703 119.694-119.722 119.694c-66.006 0-119.695-53.688-119.695-119.694 0-66.02 53.69-119.708 119.695-119.708z"/> <path fill="#d81e06" d="M175.716 217.244l-.072-3.797c-.056-1.621-.056-1.621.3-3.484a14.25 14.25 0 0 0-11.293-16.655 14.308 14.308 0 0 0-16.655 11.293 36.978 36.978 0 0 0-.796 9.785l.057 2.844a14.236 14.236 0 0 0 28.459.014zm-1.024-29.354a14.194 14.194 0 0 0 11.832-6.315 64.014 64.014 0 0 1 53.263-28.444 14.222 14.222 0 1 0 0-28.445 92.43 92.43 0 0 0-76.9 41.06 14.236 14.236 0 0 0 11.805 22.144zm463.303 205.923c97.408 0 176.611-79.203 176.611-176.583S735.403 40.633 637.995 40.633c-97.366 0-176.583 79.218-176.583 176.597.014 97.38 79.232 176.583 176.583 176.583zm0-296.291c66.033 0 119.722 53.703 119.722 119.708s-53.689 119.694-119.722 119.694c-66.006 0-119.695-53.688-119.695-119.694.015-66.02 53.704-119.708 119.695-119.708z"/> <path fill="#d81e06" d="M572.914 187.89a14.194 14.194 0 0 0 11.833-6.315 64 64 0 0 1 53.248-28.444 14.2 14.2 0 0 0 14.222-14.223 14.2 14.2 0 0 0-14.222-14.222 92.402 92.402 0 0 0-76.886 41.06 14.222 14.222 0 0 0 11.805 22.144zm406.343 268.956c-9.316-9.529-20.935-14.634-35.086-14.634-11.506 0-23.908 3.086-38.97 10.368a18042.596 18042.596 0 0 1-150.499 79.317l.697-10.667c.057-.697.085-2.787.085-3.498 0-55.34-44.23-103.254-98.588-103.254H128.711c-53.447 0-100.28 52.566-100.28 107.933v371.74c0 53.262 44.998 89.202 100.28 89.202h528.185c54.84 0 97.835-39.069 98.532-92.715-.015.057-.015.128-.029.029L753.92 867c37.788 18.944 96.498 49.38 150.94 78.051 1.55.825 2.973 1.536 4.665 2.077 14.806 4.551 26.596 7.68 37.96 7.751 20.266-.156 32.568-10.07 38.542-18.332 7.082-9.771 9.529-22.415 9.529-39.524v-384.17c0-11.336 1.45-38.002-16.3-56.008zm-38.898 439.566c-3.968-.938-8.206-2.26-11.164-3.171C737.877 792.519 731.22 792.348 722.773 792.348c-7.836 0-15.331 2.873-20.721 8.59-5.362 5.69-8.136 12.644-7.666 20.466l4.195 68.78c-.412 22.03-18.588 36.28-41.7 36.28h-528.17c-24.15 0-43.392-10.24-43.392-32.313v-371.74c0-24.093 21.177-51.044 43.392-51.044v-.014h528.185c22.315 0 41.202 22.3 41.685 45.468l-4.167 61.426a28.565 28.565 0 0 0 7.538 21.419 28.52 28.52 0 0 0 20.836 9.06c9.272 0 11.747-.03 208.17-105.089 3.883-1.877 6.827-2.958 8.96-3.584.342 2.546.57 6.287.484 11.876l-.043 384.483z"/> <path fill="#d81e06" d="M755.413 890.652l.043-.867c0 .299-.043.583-.043.867zm192.498 64.27l-.427-.028-.44.029h.867zm-192.455-65.137l.014-.327-.014.327zM286.123 499.797H165.319c-28.544 0-51.555 35.2-51.555 61.511v72.278a14.222 14.222 0 1 0 28.444-.014v-72.278c0-13.24 12.715-33.038 23.111-33.038h120.804a14.222 14.222 0 1 0 0-28.459zm71.11.015h-14.221a14.222 14.222 0 1 0 0 28.444h14.222a14.222 14.222 0 1 0 0-28.444z"/> </symbol> </svg> <!-- Vue 某个子组件 --> <svg width="50" height="50"> <use href="#music"></use> </svg> <svg width="30" height="30"> <use href="#music"></use> </svg> <svg width="30" height="30"> <use href="#music_1"></use> </svg> <svg width="100" height="100"> <use href="#shouye"></use> </svg> <svg width="400" height="400"> <use href="#shouye"></use> </svg> </body> </html>
Eight, svg fill and stroke
1. Fill and stroke, border color, width, transparency
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, ul{ margin: 0; padding: 0; } body{ background-image: url(../images/grid.png); } svg{ background-color: rgba(255, 0, 0, 0.1); color: green; } </style> </head> <body> <!-- 填充 --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <defs> <!-- <style> rect{ color: red; } </style> --> </defs> <!-- 基本的使用 --> <!-- <rect x="10" y="10" width="100" height="100" fill="red" fill-opacity="0.4" ></rect> --> <rect x="10" y="10" width="100" height="100" fill="currentColor" ></rect> </svg> <!-- 描边，边框颜色、宽度、透明度 --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <rect x="10" y="10" width="100" height="100" fill="transparent" stroke="red" stroke-width="3" stroke-opacity="1" ></rect> </svg> </body> </html>
2. The stroke-lincap of a straight line (the style of both ends of the line, round head, square head, etc.), stroke-linejoin (the style of the joint of multiple straight lines), dasharray (the straight line becomes a dashed line), dashoffset (the straight line moves within the visible range)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, ul{ margin: 0; padding: 0; } body{ background-image: url(../images/grid.png); } svg{ background-color: rgba(255, 0, 0, 0.1); } </style> </head> <body> <!-- stroke-linecap --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <!-- stroke , 而不是 fill --> <line x1="100" y1="100" x2="200" y2="100" stroke="red" stroke-width="5" stroke-linecap="round" > </line> </svg> <!-- stroke-linejoin --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <!-- stroke , 而不是 fill --> <line x1="100" y1="100" x2="200" y2="100" stroke="red" stroke-width="5" stroke-linecap="round" > </line> <polyline points="20 0, 80 50, 20 100" stroke="red" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="transparent" > </polyline> </svg> <!-- dasharray --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <!-- stroke , 而不是 fill --> <line x1="100" y1="80" x2="200" y2="80" stroke="red" stroke-width="10" stroke-dasharray="200" > </line> </svg> <!-- dashoffset --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <!-- stroke , 而不是 fill --> <line x1="100" y1="80" x2="200" y2="80" stroke="red" stroke-width="10" stroke-dasharray="100" stroke-dashoffset="10" > </line> </svg> </body> </html>
Nine, use css to fill and stroke graphics: 4 ways
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body, ul{ margin: 0; padding: 0; } body{ background-image: url(../images/grid.png); } svg{ background-color: rgba(255, 0, 0, 0.1); color: green; } //方式3 .rectangle{ fill: blue; } //方式4 优先级第三 <link rel="stylesheet" href="./style.css"> </style> </head> <body> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <!-- 方式1.属性上使用，优先级第一 --> <rect x="10" y="10" width="100" height="100" style="fill:red;" ></rect> <!-- 方式5.属性上使用，优先级第四 --> <rect x="10" y="10" width="100" height="100" fill:"red" ></rect> </svg> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <defs> <!-- 方式2.行内的样式，优先级第二 --> <style> .rectangle{ fill: green; stroke: red; } </style> </defs> <!-- 方式3 优先级第三 --> <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" > <rect class="rectangle" x="10" y="10" width="100" height="100"></rect> </svg> </body> </html>
