Svg

1）line ： 直线 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="0" x2="300" y2="300"style="stroke:rgb(99,99,99);stroke-width:2"/> </svg>代码解释：x1 属性在 x 轴定义线条的开始y1 属性在 y 轴定义线条的开始x2 属性在 x 轴定义线条的完结y2 属性在 y 轴定义线条的完结 2）polyline ： 折线 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"> <polyline points="0,0 0,20 20,20 20,40 40,40 40,60"style="fill:white;stroke:red;stroke-width:2"/> </svg>3）rect ： 矩形 <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" rx="20" ry="20" width="250"height="100" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/> </svg>rect 元素的 width 和 height 属性可定义矩形的高度和宽度style 属性用来定义 CSS 属性CSS 的 fill 属性定义矩形的填充色彩（rgb 值、色彩名或者十六进制值）CSS 的 stroke-width 属性定义矩形边框的宽度CSS 的 stroke 属性定义矩形边框的色彩 ...

在应用draw.io画图时，为了最初写成的文档转换成pdf放大不失真，所有图片我都导出为svg。然而当将svg导入Word时，因为Word对svg图片格式反对并不残缺，有些文本换行后在Word中只会显示换行前的文本，换行后的会显示为省略号，如下图： 这是我在draw.io中绘制的图形： 这是导出的svg在Word中显示的图形： 能够看到，所有换行后的文本都被显示为“...”了，也就是被暗藏了。但之前画类图的时候，换行文本是能够失常显示的： 所以应该是文本框的款式出了问题。在状态图中，我的文本框是直接插入的文本框，款式是最根底的默认款式；而类图中的款式是批改过的款式。所以查看一下两个文本框的款式⬇️ 如何查看元素款式？右键选中元素，点击编辑款式，或者cmd+E编辑款式 我的一般文本框款式： 我的类图文本框款式： 能够看到二者是不同的，间接将类图文本框的款式复制过去，并利用： 类图文本框款式：text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest; 在draw.io中看不出什么变动： 然而再次出svg并插入Word文档，能够看到，溢出的换行文本曾经被正确显示：

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_215 Favicon是favorites icon的缩写，也被称为website icon（站点图标）、page icon（页面图标）或者urlicon（URL图标）。Favicon是与某个站点或网页相关联的图标，网站设计者能够多种形式建设这种图标，简直所有浏览器都反对此性能，浏览器能够将favicon显示于浏览器的地址栏中，也可置于书签列表的网站名前，还能够放在标签式浏览界面中的页题目前： 咱们定义一个favicon的办法是将一个名为“favicon.ico”的文件置于Web服务器的根目录下，IE的收藏夹（即书签）能够主动显示该文件。起初呈现了一种更为灵便的办法，即应用HTML来为任何一个网页批示其图标所存储的地位： <link rel="icon" href="favicon.ico" type="image/x-icon" />大多数状况下应用ICO格局，古代浏览器也反对PNG（便携式网络图片）格局，和GIF（图形替换格局）动画图像格式： <link rel="icon" href="/favicon.png" type="image/png" />现如今，咱们能够应用另外一种矢量格局来创立favicon了，那就是SVG。 SVG格局faviconSVG 可能在不损失品质的状况下放大和放大，并且尺寸上比以往任何图片格式都小，它们还能够嵌入 CSS，甚至嵌入动画和媒体查问。这意味着如果在浏览器应用程序或书签栏中应用 SVG 图标，因为 SVG 外部提供的深色偏好款式，用户有可能获取与站点主题相干的（浅色或深色）图标。 首先在站点根目录建设favicon.svg文件： <svg xmlns="http://www.w3.org/2000/svg" width="400" height="344" viewBox="0 0 400 344" > </svg>接下来，增加svg门路path: <svg xmlns="http://www.w3.org/2000/svg" width="400" height="344" viewBox="0 0 400 344" > <path d="M108.731 4.224c-5.097 2.044-13.302 4.448-18.232 5.342C74.059 12.548 20 32.992 20 36.228c0 3.085 25.52 16.117 57.488 29.357 22.898 9.483 222.126 9.483 245.024 0C354.48 52.345 380 39.313 380 36.228c0-3.253-54.096-23.687-70.663-26.691-5.021-.911-13.792-3.429-19.493-5.596-13.064-4.967-168.627-4.724-181.113.283M8 48.043c0 1.917 1.745 4.563 3.878 5.882 2.133 1.318 12.366 18.074 22.741 37.236 10.374 19.161 20.693 36.07 22.931 37.575 4.769 3.207 11.4.038 8.783-4.197-.989-1.6 3.291-12.214 9.51-23.587C88.818 77.225 89.097 77.722 54 61.968 23.556 48.302 8 43.593 8 48.043M344.002 62.66c-16.498 7.701-30.539 14.544-31.202 15.207-1.381 1.381 22.346 46.434 27.1 51.455 1.729 1.827 9.039-7.173 16.243-20C363.347 96.495 371.941 82.85 375.241 79c3.299-3.85 4.774-7 3.276-7-1.497 0 .07-5.4 3.483-12 8.403-16.25 1.474-15.765-37.998 2.66m37.606 16.215c-30.721 50.032-31.314 60.191-3.03 51.963l19.422-5.65 1.188-29.206c1.51-37.145-2.738-41.278-17.58-17.107M2.521 73C1.195 77.95.085 92.215.055 104.699L0 127.398l20.74 6.08c28.87 8.463 29.274 6.83 8.326-33.606C9.326 61.767 6.341 58.746 2.521 73m110.146 10.683C114.729 89.379 195.183 156 200 156c4.817 0 85.271-66.621 87.333-72.317C288.12 81.51 252.327 80 200 80s-88.12 1.51-87.333 3.683m-30.303 26.46C66.423 139.145 65.223 144 74 144c3.3 0 6 1.8 6 4s-1.993 4-4.428 4c-6.934 0-1.717 9.949 35.654 68 53.738 83.475 79.385 120.055 82.199 117.241 3.682-3.681 3.198-168.384-.501-170.67-1.692-1.045-24.642-4.975-51-8.732C115.566 154.083 91.3 149.353 88 147.33c-4.176-2.56-2.352-3.068 6-1.671 45.724 7.648 75.402 10.539 78.312 7.629 2.804-2.804-53.996-56.062-70.691-66.283-3.286-2.012-9.608 5.585-19.257 23.138m178.116 8.755c-47.058 40.072-44.179 41.765 45.52 26.761 8.352-1.397 10.176-.889 6 1.671-3.3 2.023-27.6 6.735-54 10.471-59.576 8.43-53.48-2.339-54.84 96.88l-1.16 84.6 10.877-6.43c5.982-3.537 10.194-7.114 9.359-7.948-.835-.835 20.553-35.13 47.529-76.211 57.798-88.02 61.073-93.746 54.809-95.834-6.667-2.222-5.599-8.858 1.426-8.858 8.814 0 7.469-6.312-6.923-32.493-16.217-29.497-15.114-29.636-58.597 7.391M10.316 139.489c-1.371 2.219.939 7.291 5.134 11.273 4.196 3.981 15.486 16.398 25.089 27.593C92.117 238.484 140.91 292 144.153 292c3.177 0-28.76-53.245-40.041-66.755-5.318-6.37-32.442-49.301-40.787-64.558-4.781-8.74-11.38-13.47-23.25-16.667-9.117-2.455-18.981-5.386-21.921-6.514-2.939-1.128-6.467-.236-7.838 1.983m352.939 3.821C346.065 149.445 320 175.954 320 187.302c0 4.451-31.767 49.864-37.519 53.637-2.465 1.616-3.113 2.966-1.44 3 1.672.033-3.551 9.988-11.607 22.121-33.436 50.36-6.59 24.004 97.718-95.933 30.446-35.007 29.884-38.873-3.897-26.817" fill-rule="evenodd"/> </svg>随后，在网站头部标签中，批改icon申明： ...

突变在网页设计中简直随处可见，突变的背景、文字、按钮、图表等等，相比于纯色，突变的色彩显得更加灵动天然。 明天咱们要探讨的，就是SVG中的突变绘制。 更多SVG系列文章：SVG基础知识、SVG动画、SVG中的Transform变换。 概述或者你有应用css绘制突变图形的教训，如果要绘制一个突变的矩形，咱们能够这样写： <div class="bg"></div>.bg{ height: 100px; width: 200px; //给元素设置突变背景 background: linear-gradient(#fb3,#58a); }应用SVG绘图，色彩是通过设置元素的fill（填充色彩）和stroke（边框色彩）属性来实现。 <rect height="100" width="150" stroke="#45B649" stroke-width="2" fill="#DCE35B"></rect>对于突变色彩的设置，咱们不能像在css中那样，间接写fill="linear-gradient(color1, color2)"，而要应用专门的突变标签：<linearGradient>（线性突变） 和 <radialGradient>（径向突变）。 线性突变根底应用先来看一个最简略的例子，如何绘制一个线性突变的矩形： <svg> <defs> <linearGradient id="gradient-test"> <stop offset="0%" stop-color="#DCE35B" /> <stop offset="100%" stop-color="#45B649" /> </linearGradient> </defs> <rect height="100" width="150" fill="url(#gradient-test)"></rect></svg>通常，咱们将突变标签<linearGradient>定义在<defs>元素中，<linearGradient>的id属性作为其惟一标识，不便前面须要应用的中央对其进行援用。 <linearGradient>中的<stop>标签定义渐变色的色标，它的offset 和 stop-color属性别离定义色标的地位和色彩值，它还有一个属性stop-opacity，设定stop-color色彩的透明度。 如果将色标的地位拉近： <linearGradient id="gradient-1"> <stop offset="30%" stop-color="#DCE35B" /> <stop offset="70%" stop-color="#45B649" /></linearGradient>矩形右边的 30％ 区域被填充为 #DCE35B 实色，而左边 30％ 区域被填充为 #45B649 实色。真正的突变只呈现在矩形两头 40％ 的区域。 如果两个色彩都设为50%，就失去了两块均分矩形的实色。在这根底上，咱们能够生成各种色彩的条纹图案。 突变的方向和范畴在没有设置突变方向的时候，突变的默认方向是从左向右。 如果要设定突变方向，要用到<linearGradient>的x1,y1,x2,y2这几个属性。 <linearGradient id="gradient-1" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#DCE35B" /> <stop offset="100%" stop-color="#45B649" /></linearGradient>咱们晓得，在立体上，方向个别由向量来示意。而突变的方向由(x1,y1)（终点）和(x2,y2)（点）两个点定义的向量来示意。 在个别的利用场景中，x1,y1,x2,y2的取值范畴是[0,1]（或者用百分数[0%, 100%]）。 对于矩形而言，不论矩形的长宽比例是多少，它的左上角对应的都是(0,0)，右下角则对应(1,1)。 ...

在线SVG在线编辑器在线SVG在线编辑器 SVG在线编辑器,在线编辑SVG, SVG在线编辑器,在线编辑SVG,SVG在线编辑器,在线编辑SVG,SVG在线编辑器,在线编辑SVG. https://tooltt.com/svg/

一组丑陋的图标库，不仅能够用于开发利用，在PPT / 报告 / 海报中应用这些图标，也会让成品精益求精，值得珍藏留用。 对于 Radix IconsRadix Icons 是一组基于 15×15 像素设计的线性图标精选集，由 Modulz 设计团队出品，该团队还出品 Radix UI （交互顺滑细腻，视觉好看的 React UI 组件库）。Radix Icons 目前蕴含 250 个图标，涵盖了 web 开发罕用的畛域。 Radix Icons 图标库特点图标格调优雅细腻，无论是独自拿进去还是放在一起，都足够丑陋基于 15×15 像素网格设计，相比于常见的 16×16 网格，我感觉大小适中，特地是在高清屏，显得很细腻提供 Figma / Sketch / SVG 多种文件格式下载，满足二次批改的设计需要，也提供了 iconjar 格局（一款图标管理工具）上手体验和应用倡议图标具备简洁易懂的图形特色，应用十分宽泛，在利用开发中十分广泛，但不仅仅只用在开发中，在优良的 PPT 展现和图文报告中，也常常看到正当应用图标的作用。 Radix Icons 是一款品质很高、格调很有特点的线性图标库，250个罕用图标能满足中小我的项目的需要，难看的图标会让产品的调性晋升，给用户以更好的应用体验和业余的感触，作为有谋求的搬砖人，应该关注这些细节。 须要留神的是，目前 Radix Icons 提供的 npm 办法装置，只实用于 React 平台，Vue 或者其余平台能够通过下载选定的图标，而后应用阿里出品的 iconfont 图标管理工具来集成到开发我的项目中。 不过须要再次强调的是， iconfont 是一款图标和插画管理工具，任何人都能够上传图标，这也导致了 iconfont 充斥着大量来历不明的图标，官网明确阐明商用是有版权危险的，商用还请设计师自行创作或者抉择收费开源图标。 收费开源阐明Radix Icons 是一组收费开源的图标库，基于 MIT 开源协定托管在 Github 上，任何集体和公司都能够下载应用，包含用在商业我的项目上。相似的收费开源图标库还有很多，之前举荐的 remix icon，Ikonate 都很优质。 ...

在线SVG在线编辑器在线SVG在线编辑器 SVG在线编辑器,在线编辑SVG,SV辑器,在线编辑SVG,SVG在线编辑器,在线编辑SVG https://tooltt.com/svg/

在 js中，当咱们须要重复使用一个字段，会将它定义为一个变量，在多个中央应用在svg中，当咱们须要重复使用一个图形时，要怎么解决呢？一、通过＜use＞&＜defs＞标签，在html中间接应用应用形式： 将图形等放在 <defs> 中提前定义好，并设置 id（defs中可设置多个）用 <use> 标签的 xlink:href 属性指定对应的 id留神，defs 中的内容并不会间接渲染，在应用时才会渲染<svg> <defs> <polygon id="star" points="0 0 50 0 25 50" fill="blue" transform="scale(1)"></polygon> <!-- 多个平铺 --> <polygon id="test"></polygon> </defs> <use xlink:href="#star"></use></svg> 二、也能够在js中生成援用，来看实例后面03篇讲到，能够用js创立svg，同样的use也能够用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>use标签的应用</title> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #001122; /* svg标签是内联元素，撑满了会有滚动条进去，不想要这个滚动条所以须要重置这两个值 */ line-height: 0; font-size: 0; } </style></head><body> <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> </svg> </body><script> // nameSpace var SVG_NS = 'http://www.w3.org/2000/svg' var XLINK_NS = 'http://www.w3.org/1999/xlink' var paper = document.querySelector('svg') renderStar() // 通过一个已有元素，生成它的援用: <use xlink:href="#star"></use> 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 var star while( starCount -- ) { // 生成star的援用 star = use(starRef) // 设置透明度 star.setAttribute('opacity', `${random(0.1, 0.5)}`) // 设置transform值（translate、scale之间无分号） // polygon外部如果应用transform，会在父级use变换的根底上，持续进行变换（没有笼罩，只是持续进行） star.setAttribute('transform', `translate(${random(-400, 400)}, ${random(-300, 300)})scale(${random(0.1, 0.5)})`) // 追加进去 starGroup.appendChild(star) } }</script></html>这样咱们就失去了一个星空~ ...

一、什么是坐标变换在svg中，坐标变换 是对 一个坐标系 到 另一个坐标系 的变换的形容在上一篇中咱们说到: transform 是 基于前驱坐标系 的 本身坐标系 变换当初咱们来亲自试验下，坐标系 与 其前驱坐标系 都变换时，程序不同有怎么的影响 二、坐标变换与程序的关系（坐标系与前驱坐标系）1、坐标系与前驱坐标系都做 平移<!-- g 先 translate(50, 0)，rect 再 translate(0, 50) --><svg width="300" height="200"> <g transform="translate(50, 0)"> <rect x="0" y="0" width="100" height="50" transform="translate(0, 50)" fill="pink"></rect> </g></svg><!-- g 先 translate(0, 50)，rect 再 translate(50, 0) --><svg width="300" height="200"> <g transform="translate(0, 50)"> <rect x="0" y="0" width="100" height="50" transform="translate(50, 0)" fill="pink"></rect> </g></svg>g 先 translate(50, 0)，rect 再 translate(0, 50) ： g 先 translate(0, 50)，rect 再 translate(50, 0) 前驱坐标系与本身坐标系都做 平移 变换时，对本身坐标系来说 后果是一样的2、坐标系与前驱坐标系都做 旋转<!-- g 先 rotate(30)，rect 再 rotate(15) --><svg width="300" height="200"> <g transform="rotate(30)" x="50" y="50"> <rect x="0" y="0" width="100" height="50" transform="rotate(15)" fill="pink"></rect> </g></svg><!-- g 先 rotate(15)，rect 再 rotate(30) --><svg width="300" height="200"> <g transform="rotate(15)"> <rect x="0" y="0" width="100" height="50" transform="rotate(30)" fill="pink"></rect> </g></svg>g 先 rotate(30)，rect 再 rotate(15) ...

一、什么是svg的坐标零碎家喻户晓，数学上的坐标零碎，大部分是指 笛卡尔直角坐标系并且：x轴 向右，y轴 向上，角度为 逆时针 在svg中，坐标零碎同样也是笛卡尔直角坐标系，x轴 向右然而：y轴向下，角度为 顺时针 二、什么是svg的坐标系？在svg中，共有4种坐标系：用户 坐标系本身 坐标系前驱 坐标系参考 坐标系咱们来一一理解一下 1、用户坐标系即世界坐标系，指的是最原始的svg坐标系 2、本身坐标系图形 元素或 分组 自身具备 的坐标系 3、前驱坐标系即 父级 坐标系。本身坐标系 不产生变换 的状况下，和前驱坐标系是重合的。 如下图，rect 变换后本身坐标系是绿色局部，前驱坐标系即svg的坐标系（与用户坐标系重合） 4、参考坐标系是一种 绝对 的概念，没有特指哪个坐标系。比方下面的图中，用户坐标系也能够作为 rect 的参考坐标系，只是坐标值要依据理论状况从新计算。 三、综合实例 从头到尾顺一下思路svg的坐标系为 OA ，也是原始的用户坐标系分组B的坐标系为 OB ，translate(0, 50) 后，OB坐标系 整体下移50像素，留神是OB坐标系自身下移，而不是OB的内容下移rect C的坐标系为OC ，宽高是本人的属性，x、y则是绝对于本身坐标系OC的坐标值,OC没有变换，所以与父级坐标系重合rect D的坐标系为 OD ，细节解释同OC因为C、D没有translate，所以OB、OC、OD重合在这里就能够了解上一篇的疑难了：上一篇的 rect 的 x 、y是绝对 本身坐标系的值，因为本身没有变换，所以rect坐标系与父级坐标系重合，也就是绝对父级 g 对应坐标系的值 重要的一点：transform 是 基于前驱坐标系 的 本身坐标系 的变换，所以变换是有先后顺序的，程序扭转，变换后果就会不同，有趣味的能够看下一篇的简略例子

一、SVG 意为可缩放矢量图形（Scalable Vector Graphics）svg是应用XML形容的矢量文件。 矢量图与位图有什么区别呢？位图是基于像素点对色彩的形容，所以在放大之后会含糊矢量图是基于数学的形容，比方圆形，怎么放大都是个圆 二、应用svg的形式img引入css背景应用间接在html中引入间接在浏览器关上间接上代码：1、首先筹备一个 rect.svg 的文件 <!-- xmlns 是 svg 的命名空间 --><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- 矩形标签及属性，在下一篇文章中有具体介绍 --> <rect x="50" y="20" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9" /></svg>2、在 test.html 中 <!-- 1、img引入 --><img src="./rect.svg" alt=""><!-- 2、背景应用（款式在上面css中有定义） --><div class="rect"></div><!-- 3、间接在html中应用 --><div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9" /> </svg></div><!-- 4、间接在浏览器中关上svg文件（那就间接关上下面的rect.svg咯） -->.rect { width: 200px; height: 200px; background-image: url('./rect.svg');}间接在浏览器关上的成果：

随着前端技术的倒退，网页中的图标（Icon）曾经不再局限于 <img> 标签，还有很多实现形式，比方：Sprites（俗称雪碧图）、Icon Font（字体图标）、SVG 等等。而一个被工程师所熟知的前端框架 Bootstrap，用这些技术实现了它的图标库。 本文先介绍 Bootstrap Icons 的各种实现形式，而后再 GrowingIO Design Icons 的原理与实现。 Bootstrap Icons<img> 通过 <img> 标签来展现图标是最原始、最简略的实现形式，实现上图的成果只需在 HTML 中插入如下代码： <img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">然而，这种形式也有一个毛病：在图片显示前须要期待一个 HTTP 会话的工夫，当一个页面有若干个图标时，这个工夫就的很长。 Sprites为了解决下面提到的问题，雪碧图就应运而生。假如下图为页面上须要展现的三个图标： 实现代码如下： <svg class="bi" width="32" height="32" fill="currentColor"> <use xlink:href="bootstrap-icons.svg#heart-fill"/></svg><svg class="bi" width="32" height="32" fill="currentColor"> <use xlink:href="bootstrap-icons.svg#toggles"/></svg><svg class="bi" width="32" height="32" fill="currentColor"> <use xlink:href="bootstrap-icons.svg#shop"/></svg>雪碧图的原理就是把所有的图标都汇总到一个文件中，再通过 CSS 切图或者 SVG 的 <symbol> 来实现。不论要展现多少个图标，都只会有一个 HTTP 会话。 尽管通过 Sprites，把 HTTP 会话数量升高到一个，然而它的下载机会还是在第一次展现图标的时候，还是须要用户等在这个大文件的下载。 Icon fontCSS 中 @font-face 的呈现，为解决上述问题提供了思路。@font-face CSS at-rule 指定一个用于显示文本的自定义字体，字体能从近程服务器或者用户本地装置的字体加载。应用办法如下： @font-face { font-family: "bootstrap-icons"; src: url("./fonts/bootstrap-icons.woff2?a97b3594ad416896e15824f6787370e0") format("woff2"),url("./fonts/bootstrap-icons.woff?a97b3594ad416896e15824f6787370e0") format("woff");}展现如下图标： HTML 代码如下： <i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>这样之后，能够用 来事后加载字体文件： ...

【SVG】SVG的夺命利器——path博客阐明 文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！阐明昨天一公布，忽然看到有敌人留言，心愿看到更多的SVG的文章。忽然有些打动，那么持续。（打动点比拟低哈） path元素的能力path元素是SVG根本形态中最弱小的一个，它不仅能创立其余根本形态，还能创立更多其余形态。 比方矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形等。 更重要的是可能绘制一些曲线，如贝塞尔曲线、二次曲线等。 path元素的形态是通过属性d来定义的，d属性通过“命令和坐标”的序列来管制整个path绘制的门路path的坐标命令先采纳总分的模式吧。 M = movetoL = linetoH = horizontal linetoV = vertical linetoC = curvetoS = smooth curvetoQ = quadratic Bézier curveT = smooth quadratic Bézier curvetoA = elliptical ArcZ = closepath而后一个个来介绍次要分为直线命令和曲线命令 直线命令直线命令次要有以下几种： M（moveto）：须要两个参数（x轴和y轴坐标，挪动到的点的x轴和y轴的坐标L（lineto）：须要两个参数（x轴和y轴坐标），它会在以后地位和最新的地位（L后面画笔所在的点）之间画一条线段。H（horizontal lineto）：一个参数，表明在x轴挪动到的地位，绘制水平线V（vertical lineto）：一个参数，表明在y轴挪动到的地位，绘制垂直线Z（ closepath）：从以后点画一条直线到门路的终点示例： 画一个正方形 <svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M10 10 H 90 V 90 H 10 L 10 10"/></svg>成果： 代码解析： 首先定义了一个100x100的画布（坐标系），用M命令在（10，10）创立终点，通过H命令在程度方向挪动到x轴为90的地位，y轴不变，也就是挪动到（90， 10），再通过V命令挪动到y轴为90的地位，x轴不变，也就是坐标为（90，90）的地位，再通过H命令在程度方向挪动到x轴为10的地位，y轴不变，此刻的地位为（10，90），最初应用L命令在终点（10，10）的地位与上次的点（10，90）画一条直线，那么四条边就画完了。 思考？ 通过下面的参数和示例能够想到，其实最初的一步有几种方法能够实现 <svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!-- 利用Z命令 --> <path d="M10 10 H 90 V 90 H 10 Z"/> <!-- 利用V命令 --> <path d="M10 10 H 90 V 90 H 10 V 10"/></svg>实现的成果都是一样的，Z命令是间接从以后点画一条直线到终点，V利用本次示例中最初一步向垂直方向挪动，所以它也可能做到。 ...

在线SVG在线编辑器在线SVG在线编辑器 SVG在线编辑器,在线编辑SVG https://tooltt.com/svg/

最近接的需要里有个漏斗图，比照了下图表库的漏斗，长得有点不大一样，尽管一样有漏斗，然而残余局部看着图表库没法组合实现，于是想想本人简略实现一个。 左边局部其实很好简略，次要是右边的漏斗图实现，漏斗图其实就是几个等腰梯形拼装起来，如果是用div+css，想到的是利用border，那么组装起来又略微麻烦的，罗唆用svg来做： polygon 就能够间接画等腰梯形固定坐标的形式使得拼接也没多大问题那么怎么取梯形的坐标点呢？和数据有什么样的法则？ 通常来说漏斗都是上宽下窄，每一个梯形的高低边长，其实对应这每一块节点数据的比照。如上图，假如即为漏斗第一格数据， 那么AB边长即为漏斗的最大宽度，也映射着第一格数据，而底边CD变长则映射为第二格数据。那么两条边的比例即可确定了，假如漏斗数据为 a1,a2,a3,a4那么 AB : CD = a1 : a2 A点坐标为终点，即(0, 0)， 假如漏斗图宽为allWidth，那么B点坐标应该就是(allWidth, 0)C点坐标即计算(CG, AG): 漏斗块咱们固定高度，所以AG长固定,假设为hCG = (AB - CD)/2; 转为计算数据比例则是 CG = allWidth * (1 - a2/a1)/2D点坐标利用等腰梯形对称个性，坐标为(allWidth - CG, h) 认真一想，每个梯形的顶边坐标即为上一个梯形的底边坐标，而底边坐标只有计算出差值即CG边长，即可得出左右两坐标的横坐标。 基于这些总结的关系，假如咱们的数据是这样的 list = [{number: 100}, {number: 60}, {number: 50}, {number: 10}]，咱们按上面代码来取出要画的四个polygon的四个顶点坐标 （0,0）为终点 // BASE_WIDTH 为理论边宽, PER_HEIGHT为梯形高// 取出顶边数据（对应BASE_WIDTH) const allWidth = list[0].number; // 先计算每一个差值 const deltas = list .slice(1)// 排除掉第一个数据即基准值 .concat(list[list.length - 1]) // 结尾补充一个，最初一个梯形没有下一个比拟，所以是矩形 .map((item) => { return ((1 - item.number / allWidth) / 2) * BASE_WIDTH; }); // 遍历数据 return list.map((item, index) => { let points; // 独立解决第一个数据 if (index === 0) { points = [ [0, 0],// 左上点 [BASE_WIDTH, 0],// 右上点 [BASE_WIDTH - deltas[index], PER_HEIGHT],// 右下点 横坐标即全长-差值 [deltas[index], PER_HEIGHT], // 左下点 横坐标即为差值 ]; } else { points = [ [deltas[index - 1], PER_HEIGHT * index], // 左上点，即上一个梯形的左下点，纵坐标为一个PER_HEIGHT [BASE_WIDTH - deltas[index - 1], PER_HEIGHT * index],// 右上点 即上一个梯形的右下点 [BASE_WIDTH - deltas[index], PER_HEIGHT * (index + 1)],// 右下点 [deltas[index], PER_HEIGHT * (index + 1)],// 左下点 ]; } return { ...item, points, }; });至此，就整顿出了几个梯形对应的顶点坐标了，接下来只有利用一下svg的polygon即可。 ...

https://www.qq.com/video/k323...

????️ SVG 图案动画（Pattern）想要在Web页面中绘制背景图案，咱们首先可能想到的是应用 CSS，可能你也有所尝试，比方简略的突变到简单的网格、点阵等，SVG 中也有绘制背景图案的解决方案。 SVG 中 fill 属性反对以 pattern 形式填充一个图案，Pattern 也是一个弱小的元素申明，如果图案设计的比拟完满，那么会轻易失去一个无缝连接的图案。像这样： 原理在 Web 页面开发中如果想应用 SVG 生成背景，实际上有两种应用办法： SVG Pattern一个纯 SVG Pattern 应用的过程大抵如下： 在 SVG 中申明一个 pattern 元素pattern 中要申明咱们想要绘制的图形创立一个新的图形，应用 SVG 中的 fill 属性，填充图案代码例子： <svg width="360" height="240"> <!-- defined a pattern for canvas --> <defs> <pattern id="rect" patternUnits="userSpaceOnUse" width="60" height="60"> <rect width="30" height="30" fill="#4af" :x="range" :y="range"></rect> </pattern> </defs> <!-- simulate the pattern area --> <rect width="60" height="60" stroke="#a4f" stroke-width="2" fill="none" /> <!-- fill pattern into canvas --> <rect id="canvas" width="360" height="240" stroke="#aaa" fill="url(#rect)" /></svg>下面代码会失去如下图形，蓝色方块就是咱们申明的 pattern （图案），图案区域大小为 60 60 （单位 px），下图以紫色边框模仿一个图案的大小范畴，图案就会以这样反复填满整个 360 240 的图形区域，造成一个大的图案。 ...

✨ SVG 闪动动画（Blink）演示人类的视觉比拟容易被变动所吸引，尤其是色彩的变动。像上世纪 80 年代的霓虹灯广告牌，我很难不被它所吸引。 原理闪动动画成果的外围在于管制元素色彩的变动，把握好工夫的管制，让色彩的变动有引人注目的显示，这样在动态的页面中，天然会吸引住用户的眼球。 实战上面会应用三种办法编写一个闪动动画： CSS 实现 Blink 动画CSS 动画也能够实现各种类型的闪动成果，比方让整个元素进行一直的 显示/暗藏 切换（通过 display 属性），不过最好不要这么做，这会导致浏览器进行回流，有肯定的性能开销；或者通过管制色彩的透明度（opacity 属性），文字的闪动成果能够通过管制色彩的变动（color 属性）等等。上面看一个闪动动画实例： 能够在 CodePen 上进行尝试 ????https://codepen.io/xiaoluobod... 这段动画实现了让文字过渡到通明，然而会僵硬的变回原来的色彩，不过它足够“闪动“，如何让色彩过渡更平滑呢，实际上闪动动画搭配 animation-direction 属性应用成果会更好，animation-direction 属性如何设置为 alternate 或者 alternate-reverse（默认为 normal）时， 它的作用是会让动画减少一个循环周期，这时须要把 animation-duration （动画时长）减半，能力达到预期的成果。 能够在 CodePen 上进行尝试 ????https://codepen.io/xiaoluobod... SVG 实现 Blink 动画SVG SMIL Animation 同样也能实现对图形的闪动成果，通过申明 attributeName 为 fill ，指定想要变动的色彩。设定动画时长，就会让 SVG 图形闪动起来。外围代码： <polygon fill="#4fd2dd" points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"> <animate attributeName="fill" values="#4fd2dd;#235fa7;#4fd2dd" dur="0.5s" begin="0s" repeatCount="indefinite" /></polygon>上述代码指定了 polygon 折线会按以下色彩程序进行色彩的有限循环变动，产生闪动成果 ...

✏️ SVG 描边动画（Stroke）演示 查看在线版本 Polygon's PlayStation 4 Reviewvivus.js - svg animation原理要实现下面酷炫的描边动画，首先咱们须要理解 SVG 中实现描边动画的三个相干属性：别离是 stroke、stroke-dasharray、stroke-dashoffset。这三个属性作为外观显示属性，都能够作为 CSS 属性来应用。 strokeSVG 中的 stroke 属性用来管制绘制描边的形式，咱们也能够应用 CSS 来管制 SVG 的描边款式。 https://codepen.io/xiaoluobod... stroke-dasharray咱们晓得在 CSS 中实现虚线边框，要应用 border: 1px dashed #f4a; ；在 SVG 中要实现虚线成果就要应用 stroke-dasharray 属性。 https://codepen.io/xiaoluobod... stroke-dashoffsetstroke-dashoffset 属性用来指定门路从开始地位的偏移量。通过指定偏移量会让绘制好的线偏移 原来的地位一段空白 https://codepen.io/xiaoluobod... 动起来那么联合下面三个属性，咱们试着动静扭转 stroke-dashoffset 属性，看看会产生什么。通过动静扭转偏移量属性，联合设定好的 width 以及 stroke-dasharray 属性，会让原来动态的线有一种用画笔描绘出来的成果。 https://codepen.io/xiaoluobod... 实战上面咱们应用 GreenSock 实现描边成果，GreenSock 提供了 DrawSVGPlugin 用于管制各种图形的描边成果，原理次要是通过管制下面学过的 stroke-dasharray 、stroke-dashoffset 两个CSS属性来实现动画成果。 获取 SVG 代码这里就应用 vivus 中的 Hi There 动画 作为 Demo，关上 vivus 官网，关上开发者工具，这里应用的是 Chrome，选中 Hi There dom 元素，能够看到 Hi There 的 SVG 代码。咱们选中元素右键复制进去。 ...

???? 应用 GreenSock 制作动画为什么抉择 GSAP？先来看一个 GSAP （GreenSock Animation Platform）介绍，以下动画应用 GSAP 编写： https://codepen.io/GreenSock/... 的确现在有很多种办法让 Web 页面活泼起来，我在《SVG 根本介绍》章节也比照过一些优良的 SVG 相干类库，为什么我抉择应用 GSAP 编写 SVG 动画，咱们看一张 GSAP 性能全景图 相比之下 GSAP 有以下长处： 简直能够让任何元素动起来，包含 SVG语法简洁，容易上手领有操作时间轴性能，对制作线性动画有很大帮忙样例丰盛，在 CodePen 上有大量 Demo插件功能强大，包含 DrawSVG、MorphSVG 等性能良好，兼容性良好GSAP 到底有什么用呢，其实 GSAP 的外围性能是提供了操纵元素属性的能力，更有功能强大的插件辅助，会让简单动画变的可操控。 开始应用 GSAP上面应用一个小例子解说 GSAP筹备 SVG咱们在 Sketch 里绘制了一个圆形，导出优化后的 SVG 代码如下： <svg width="960px" height="240px" viewBox="0 0 960 240"> <g id="shape-page"> <circle id="circle" fill="#60CCFD" cx="120" cy="120" r="80"></circle> </g></svg>简略位移// 形容了使指标 circle 在两秒外向 x 轴位移 320pxgsap.to('#circle', { x: 320, duration: 2})https://codepen.io/xiaoluobod... 如果你也相熟应用 CSS 开发动画，那么上面列表会帮忙你了解 gsap.to 中属性的作用 ...

???? SVG 文件优化个别咱们应用 AI、Sketch 等矢量图设计工具导出的 SVG 文件代码绝对还是比拟“臃肿”的，理论在 Web 页面上应用 SVG 时候，有些标签或者属性是不须要的。比方 title / desc 标签、或者version 属性申明。 咱们能够借助优化工具来简化 SVG 文件大小，并且放弃 SVG 原有输入的矢量内容。 工具SVG 的优化罕用伎俩是应用工具 svgo ，svgo 是一个运行在 Node.js 下的优化 SVG 文件的命令行工具。咱们也能够应用基于 svgo 而衍生的一些工具，比方： Web 利用： SVGOMGSketch 插件： svgo-compressor张鑫旭开发的小工具： SVG在线压缩合并工具Web 利用优化优化前比方上面是设计师童鞋应用 Sketch 输入的一个 Icon。代码如下： 优化后上面应用 SVGOMG 工具进行优化，能够看到优化后的文件仅仅占有源文件的 37.74% 体积大小 再看下优化后的 SVG 代码文件 一些无用的标签以及属性曾经去掉了，放弃了 SVG 文件的简洁性，svgo 提供了一些列可配置的选项，不便管制哪些属性/标签会被移除。 Sketch 输入优化如果开发者是和 UI 童鞋单干的化，倡议把 Sketch 插件 svgo-compressor 举荐给 UI 童鞋，这样咱们拿到的 SVG 文件就是优化过后的了。 ...

???? SVG 文件输入在编写 SVG 动画前，咱们应该先要筹备矢量文件，矢量文件蕴含来咱们须要的 SVG 代码，通常咱们不会去手写 SVG 代码，简略的形态还过得去，简单点的形态，手写代码会变得吃力很多，咱们能够借助诸如 Adobe Illustrator（简称AI）、Sketch 或者是 Inkscape 这样的业余的矢量设计工具来进行矢量图形设计，而后导出 SVG 代码。 上面咱们次要介绍应用 Sketch 来输入 SVG 文件 Sketch 输入 SVG???? Sketch TipsSketch 是 macOS 上的 UI 设计利器，反对欠缺的 SVG 图形编辑性能。上节《SVG 根本介绍》 中的图形代码就是通过 Sketch 生成的。上面咱们来意识下跟开发非亲非故的一些操作，再来看一下上大节的图形代码以及 Sketch 界面： <?xml version="1.0" encoding="UTF-8"?><svg width="960px" height="160px" viewBox="0 0 960 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>shape page</title> <g id="shape-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <rect id="rect" stroke="#979797" fill="#D8D8D8" x="0.5" y="0.5" width="159" height="159"></rect> <circle id="circle" stroke="#979797" fill="#D8D8D8" cx="280" cy="80" r="79.5"></circle> <path id="decagon" d="M480,0.525731112 L433.286197,15.7039659 L404.415479,55.4411003 L404.415479,104.5589 L433.286197,144.296034 L480,159.474269 L526.713803,144.296034 L555.584521,104.5589 L555.584521,55.4411003 L526.713803,15.7039659 L480,0.525731112 Z" stroke="#979797" fill="#D8D8D8"></path> <path id="star" d="M680,1.12977573 L656.820623,48.0963241 L604.989959,55.6277604 L642.49498,92.1861198 L633.641245,143.807352 L680,119.435112 L726.358755,143.807352 L717.50502,92.1861198 L755.010041,55.6277604 L703.179377,48.0963241 L680,1.12977573 Z" stroke="#979797" fill="#D8D8D8"></path> <line id="line" x1="800.5" y1="159.5" x2="960" y2="4" stroke="#979797" stroke-linecap="square"></line> </g></svg> ...

???? SVG 根本介绍SVG (Scalable Vector Graphics)现在可缩放的矢量图（SVG）在 Web 页面上充当着重要的角色，SVG 图标、SVG 图像、SVG 图案、SVG 动画甚至是简单的数据可视化图表都能够由 SVG 进行绘制。 SVG 个性： Responsive因为 SVG 是矢量图像，能够有限缩放图像内容而不失真，这样在任何终端看到的图像都是高清的； PerformanceSVG 能够进行优化，通过缩小不必要的属性或者门路中的点或图形，让文件尺寸更小； InteractiveSVG 代码是 XML 语言进行形容的，能够联合 CSS 以及 JavaScript 进行交互； Designable业界有十分弱小的设计工具能够将设计好的 SVG 图像输入为 SVG 代码，比方 Adobe Illustrator、Sketch、InkScape 等。SVG 领有对设计师和开发者都敌对的内容输入； Visualization通过联合数据，SVG 也能够实现简单的数据可视化图表，比方: ECharts SVG Version / D3.js 都是应用 SVG 进行图表绘制。 SVG 根本图形<?xml version="1.0" encoding="UTF-8"?><svg width="960px" height="160px" viewBox="0 0 960 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>shape page</title> <g id="shape-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <rect id="rect" stroke="#979797" fill="#D8D8D8" x="0.5" y="0.5" width="159" height="159"></rect> <circle id="circle" stroke="#979797" fill="#D8D8D8" cx="280" cy="80" r="79.5"></circle> <path d="M480,0.525731112 L433.286197,15.7039659 L404.415479,55.4411003 L404.415479,104.5589 L433.286197,144.296034 L480,159.474269 L526.713803,144.296034 L555.584521,104.5589 L555.584521,55.4411003 L526.713803,15.7039659 L480,0.525731112 Z" id="decagon" stroke="#979797" fill="#D8D8D8"></path> <path d="M680,1.12977573 L656.820623,48.0963241 L604.989959,55.6277604 L642.49498,92.1861198 L633.641245,143.807352 L680,119.435112 L726.358755,143.807352 L717.50502,92.1861198 L755.010041,55.6277604 L703.179377,48.0963241 L680,1.12977573 Z" id="star" stroke="#979797" fill="#D8D8D8"></path> <line x1="800.5" y1="159.5" x2="960" y2="4" id="line" stroke="#979797" stroke-linecap="square"></line> </g></svg>下面代码会绘制出以下图形 ...

明天的知识点 (2020.11.24) —— 第588天 (我也要出题)[html] 应用canvas画一个中国象棋的棋盘[css] 解释下为什么在挪动端切图时会有应用到2倍图片呢？[js] 解释如下代码的输入后果，并革新代码使得按程序输入i[软技能] 前端如何优化Content Download耗时太久的问题？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

明天的知识点 (2020.11.16) —— 第580天 (我也要出题)[html] 应用svg画出一个时钟[css] 如何确定元素的蕴含块？[js] 举例说明哪些场景会遇到超大计算量的问题？[软技能] 有多个紧急任务同时到来，但人少又不够时，你要如何决策先做哪个？为什么？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

明天的知识点 (2020.11.15) —— 第579天 (我也要出题)[html] 应用svg画一个平行四边形[css] 说说你对css蕴含块的了解[js] 写一个办法求给定1485个元素中取33个元素的组合有多少种（大数据处理，小心CPU爆炸）[软技能] 如果要在页面上放一组图片轮播图，你认为多长时间播放一次比拟好，为什么？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

最近咱们设计师反馈，他想要做如下的一个加载动画。然而要么成果好的导出的 GIF 体积特地大，看了下有 8M 多了，要么体积小的 GIF 成果又特地不分明。而后我看了下成果，发现其实用 SVG 动画来实现应该比较简单，于是就和设计师要了一下原始的稿子导出成 SVG 后处理了下。 因为 SF 不反对插入视频，大家能够拜访腾讯视频地址 https://v.qq.com/txp/iframe/p... 查看设计师预期的动效视频。 将 AE 动效稿子转成 SVG 动画的话 Airbnb 有出过一款 Lottie 的工具。通过它的 AE 插件 Bodymovin 可能以 JSON 的模式导出动画信息和素材。而后在网页上应用 bodymovin.js 动画播放库载入该 JSON 素材即可实现动效的转换。具体的应用教程能够参考 Youtube 视频《How to export an animation with Bodymovin》。 应用 Bodymovin 是真的十分不便，不过介于设计师须要的成果比较简单，为了这个成果而每次去加载一个几十KB的根底库和JSON文件切实是没有必要。所以我这里就基于 SVG + CSS 动画来实现了下，最终的成果如下。最终体积也就 6KB，gzip 后会更小。上面就来跟着我一块一步步的实现它吧！这里我不会特地具体的形容每一步的基本原理，如果大家想理解 SVG 动画的基础知识的话能够先看看我之前写的文章《SVG 动画实际》。 动画拆分剖析通过观察发现该动画次要用到了平移、旋转、透明度，宽度和色彩等属性变动等动画成果。这些都能够通过 CSS3 动画来实现，剩下的咱们须要对这些动画进行拆分，先别离实现它们。最初将他们组合，通过肯定的工夫配合实现残缺的成果。 在这里我将该动效最终拆分成了以下几个局部： 外圈的波纹成果 外圈1的波纹成果外圈2的波纹成果外圈3的波纹成果主体的舒展静止 主体绿色局部的平移舒展 主体绿色局部上的平移舒展主体绿色局部下的平移舒展主体红色圆球的渐隐成果主体蓝色局部的平移舒展主体红色横条的渐隐成果主体局部的自转蓝球的公转成果每一个独自的动画成果咱们都须要对其进行解决，所以咱们须要对导出的 SVG 进行元素的整顿，将咱们须要进行操作的元素进行分组标记。因为 Sketch 导出的 SVG 文件会带有比拟多的冗余元素，所以我个别会在手工解决 SVG 之前在走一遍 svgo 这类工具对内容进行优化。这里举荐张鑫旭老师写的 SVG 在线压缩合并工具，间接粘贴 SVG 代码过来即可，非常简单。上面是 SVG 整体构造的示意代码。 ...

8月27日晚，即构联结技术社区LiveVideoStack在线上举办了互动白板的技术分享直播流动，吸引了大量在线教育及音视频相干的开发者参加。即构科技互动白板研发负责人陈晓聪在流动上分享了咱们在互动白板的技术摸索与实际，并首次公开即构是如何解决“白板与音视频的同步、白板的多端实时互动同步”两个技术难点的。 在本次流动上，陈晓聪首先介绍了即构互动白板的劣势以及整体技术框架。 一、即构互动白板的劣势全面笼罩支流平台、支流框架，基于原生平台的技术框架开发，便于依据平台个性深度优化性能，升高SDK包大小；互动涂鸦实时同步；白板绘制与音视频实时同步；文档共享反对10+支流的文档格局，反对动静PPT，是以后市面上反对文档格局最齐全的白板零碎；丰盛的白板教具，包含画笔、文本、直线、矩形、椭圆、激光笔、橡皮擦等，同时针对教育行业的需要，有布局的丰盛教具；白板与音视频的实时同步录制，曾经开发实现，正在内测中，很快就能上线，有需要的小伙伴能够放弃关注。二、即构互动白板整体技术框架即构的互动白板次要是由以下几局部形成： 1、白板互动服务 数据的存储和操作信令的转发，信令的同步就是由这个服务负责。 2、文档转码服务 文档的转码、拜访鉴权，咱们的转码服务有个劣势，就是针对Native端转出的是PDF，针对Web端转出的是SVG，这样就能实现矢量放大，高清放大不含糊。 3、对象存储 负责文档资源的存储，采纳与文档转码服务相拆散的设计，客户除了能够应用即构的对象存储，还能够抉择本人的对象存储，能够打消客户对文档资源平安的顾虑。 4、内容散发网络 负责文档资源的寰球减速散发，实现客户端对文档资源的就近拜访，确保客户在寰球各地都能疾速共享文档。 5、云录制服务 负责对互动白板信令和音视频流进行实时采集、合成，实现互动白板和音视频的同步录制、回放，反对对课堂中的白板和音视频进行混流合成MP4。 在介绍了即构互动白板的整体技术框架后，陈晓聪深度分享了即构是如何解决互动白板技术实现中的两大难点：音视频与白板实时同步、互动白板多端实时互动同步。 三、即构互动白板技术实际通过理论应用的痛点形容、问题产生的起因以及对应的解决方案，层层深刻分享互动白板的技术实际。 白板音视频不同步产生的起因？最容易呈现白板音视频不同的的两大场景？即构白板音视频同步的解决方案是什么？多端实时互动不同步次要由哪三方面导致的？针对这三个痛点即构的解决方案？下面的内容，咱们在流动中进行了具体的分享。错过直播的小伙伴，能够扫描下方二维码，获取流动的残缺视频回放、演讲PPT、演讲文字稿。 本次流动咱们分享了整体的技术框架，并针对白板音视频同步和多端实时同步两个技术难点分享了咱们的摸索和实际，欢送更多对互动白板技术实现感兴趣的小伙伴与咱们互动交换。

作者：心叶 工夫：2020-09-01 00:13 咱们演示如何绘制了圆弧。 因为位图的画布是基于Canvas，而矢图基于SVG，因而咱们须要先假如页面有一个SVG标签。 获取画笔var painter=$$('svg').attr({ "width":300, "height":300 }).painter();能够看到，除了传递的结点变成了SVG外没有区别，咱们同样设置了画布大小。 配置画笔painter.config({ 'strokeStyle':'red', 'lineWidth':3, 'lineDash':[5] });绘制简略图形画笔获取并配置好了当前，同样的，咱们间接调用画笔上的办法试试： painter.strokeArc(150, 150, 100, 130, Math.PI/2, Math.PI/2*3);很惋惜，报错了（关上浏览器控制台查看）： Uncaught Error: Need a <path> ! at t (image2d:17) at Object.t \[as strokeArc\] (image2d:17) at example\-2.html:40通过打印的谬误提醒能够看到，咱们不足一个path结点，为什么会这样，不是曾经有画布了吗？ SVG和Canvas画布的区别因为Canvas是位图，绘制相似在一块画布上不停的涂鸦，而SVG有点相似一般的HTML类型标签（比方输入框是input），SVG绘制的各种图形其实也须要对应页面中一个SVG类型标签，下面就是对应一个path标签。 因而，咱们把最初一行绘制的办法略微革新一下（上面波及的bind和appendTo办法请查看矢图画笔一节中的阐明）： painter .bind('<path>') .appendTo() .strokeArc(150, 150, 100, 130, Math.PI/2, Math.PI/2\*3);再次运行，一个圆弧就绘制好了，能够点击此处查看运行成果。 数据绑定接下来咱们要演示如何应用SVG画布疾速的绘图，相干的API请点击此处查阅。 如何疾速绘制柱状图假如当初咱们有一堆数据： // 筹备好数据 var datas =[220,182,191,234,290,330,310,123,442,321,90,149,210,122,133,334,198,123,125,220\];通过后面咱们曾经晓得了，因为柱状图其实就是一个个小矩形（也就是rect），因而咱们首先须要让页面中rect的个数和数组中元素的个数一样： // 首先查找页面中的rect var imageObject = $$('rect'); // 而后把数据绑定到rect结点上，返回的是更新对象 var update = imageObject.data(datas); // 因为页面中rect结点可能不够，有余的进行补充 var enter = update.enter('<rect>').appendTo('svg');这个时候你通过浏览器调试工具的Elements来查看rect结点个数，发现曾经和数据对应起来了。 ...

申明：本次撰写以Datawhale团队提供的学习材料以自学为主，代码为Datawhale团队提供，利用阿里云天池实验室与编辑器pycharm实现测试。 反对向量机（Support Vector Machine，SVM）是一个十分优雅的算法，具备十分欠缺的数学实践，罕用于数据分类，也能够用于数据的回归预测中，因为其柔美的实践保障和利用核函数对于线性不可分问题的解决技巧， 在上世纪90年代左右，SVM曾红极一时。 本文将不波及十分严格和简单的理论知识，力求于通过直觉来感触 SVM。 Demo实际  Step1:库函数导入 Step2:构建数据集并进行模型训练 Step3:模型参数查看 Step4:模型预测 Step5:模型可视化学习指标*理解反对向量机的分类规范;*理解反对向量机的软距离分类;*理解反对向量机的非线性核函数分类;能够对照之前的逻辑回归模型的决策边界，咱们能够发现两个决策边界是有肯定差别的（能够比照两者在X,Y轴 上的截距），这阐明这两个不同在雷同数据集上找到的判断线是不同的，而这不同的起因其实是因为两者抉择的 最优指标是不统一的。接下来咱们进行SVM的一些简略介绍。 反对向量机的介绍咱们经常会碰到这样的一个问题，首先给你一些分属于两个类别的数据 当初须要一个线性分类器，将这些数据离开来。 咱们可能会有多种分法：那么当初有一个问题，两个分类器，哪一个更好呢？ 为了判断好坏，咱们须要引入一个准则：好的分类器不仅仅是可能很好的离开已有的数据集，还能对未知数据集 进行两个的划分。 假如，当初有一个属于红色数据点的新数据（3， 2.8） 能够看到，此时彩色的线会把这个新的数据集分错，而蓝色的线不会。 咱们刚刚举的例子可能会带有一些主观性。 那么如何主观的评判两条线的健壮性呢？ 此时，咱们须要引入一个十分重要的概念：最大距离。 最大距离刻画着以后分类器与数据集的边界，以这两个分类器为例：能够看到， 蓝色的线最大距离是大于彩色的线的。 所以咱们会抉择蓝色的线作为咱们的分类器。那么，咱们当初的分类器是最优分类器吗？ 或者说，有没有更好的分类器，它具备更大的距离？ 答案是有的。 总体代码： import numpy as npimport matplotlib.pyplot as pltfrom sklearn.datasets import make_blobs#matplotlib inline# 画图X, y = make_blobs(n_samples=60, centers=2, random_state=0, cluster_std=0.4)plt.scatter(X[:, 0], X[:, 1], c=y, s=60, cmap=plt.cm.Paired)# 画散点图X, y = make_blobs(n_samples=60, centers=2, random_state=0, cluster_std=0.4)plt.scatter(X[:, 0], X[:, 1], c=y, s=50, cmap=plt.cm.Paired)x_fit = np.linspace(0, 3)# 画函数y_1 = 1 * x_fit + 0.8plt.plot(x_fit, y_1, '-c')y_2 = -0.3 * x_fit + 3plt.plot(x_fit, y_2, '-k')# 画散点图X, y = make_blobs(n_samples=60, centers=2, random_state=0, cluster_std=0.4)plt.scatter(X[:, 0], X[:, 1], c=y, s=50, cmap=plt.cm.Paired)plt.scatter([3], [2.8], c='#cccc00', marker='<', s=100, cmap=plt.cm.Paired)x_fit = np.linspace(0, 3)# 画函数y_1 = 1 * x_fit + 0.8plt.plot(x_fit, y_1, '-c')y_2 = -0.3 * x_fit + 3plt.plot(x_fit, y_2, '-k')# 画散点图X, y = make_blobs(n_samples=60, centers=2, random_state=0, cluster_std=0.4)plt.scatter(X[:, 0], X[:, 1], c=y, s=50, cmap=plt.cm.Paired)x_fit = np.linspace(0, 3)# 画函数y_1 = 1 * x_fit + 0.8plt.plot(x_fit, y_1, '-c')# 画边距plt.fill_between(x_fit, y_1 - 0.6, y_1 + 0.6, edgecolor='none', color='#AAAAAA', alpha=0.4)y_2 = -0.3 * x_fit + 3plt.plot(x_fit, y_2, '-k')plt.fill_between(x_fit, y_2 - 0.4, y_2 + 0.4, edgecolor='none', color='#AAAAAA', alpha=0.4)# 画散点图X, y = make_blobs(n_samples=60, centers=2, random_state=0, cluster_std=0.4)plt.scatter(X[:, 0], X[:, 1], c=y, s=50, cmap=plt.cm.Paired)# 画图y_1 = 1 * x_fit + 0.8plt.plot(x_fit, y_1, '-c')# 画边距plt.fill_between(x_fit, y_1 - 0.6, y_1 + 0.6, edgecolor='none', color='#AAAAAA', alpha=0.4)from sklearn.svm import SVC# SVM 函数clf = SVC(kernel='linear')clf.fit(X, y)# 最佳函数w = clf.coef_[0]a = -w[0] / w[1]y_3 = a*x_fit - (clf.intercept_[0]) / w[1]# 最大边距 下届b_down = clf.support_vectors_[0]y_down = a* x_fit + b_down[1] - a * b_down[0]# 最大边距 上届b_up = clf.support_vectors_[-1]y_up = a* x_fit + b_up[1] - a * b_up[0]# 画散点图X, y = make_blobs(n_samples=60, centers=2, random_state=0, cluster_std=0.4)plt.scatter(X[:, 0], X[:, 1], c=y, s=50, cmap=plt.cm.Paired)# 画函数plt.plot(x_fit, y_3, '-c')# 画边距plt.fill_between(x_fit, y_down, y_up, edgecolor='none', color='#AAAAAA', alpha=0.4)# 画反对向量plt.scatter(clf.support_vectors_[:, 0], clf.support_vectors_[:, 1], edgecolor='b', s=80, facecolors='none')为了找出最优分类器，咱们须要引入咱们明天的配角：SVM带黑边的点是间隔以后分类器最近的点，咱们称之为反对向量。 反对向量机为咱们提供了在泛滥可能的分类器之间进行抉择的准则，从而确保对未知数据集具备更高的泛化性。 ...

最近在工作中做一个h5相干的半圆进度组件需要，便开始学习了下svg。 SVG 是应用 XML 来形容二维图形和绘图程序的语言，SVG指可伸缩矢量图形 (Scalable Vector Graphics) SVG根本属性SVG的坐标零碎在介绍其它属性时，必须先介绍svg的坐标零碎，和咱们高中学的坐标系有点不同，也能够说是第一象限按x轴翻转失去svg的坐标系。y轴右方x为正值，x轴下方y为正值。 SVG 值的单位在svg中默认的单位为px，能够写单位，也能够不写单位。 svg视窗大小大小每次你创立了一个新的SVG元素，你也就创立了一个新的SVG视窗。视窗的大小等于你为SVG元素设置的宽度和高度。svg在绝大多数浏览器中，默认大小为长300px，宽150px的大小，理论利用中举荐制订svg的width和height值。 <svg width="100" height="100"></svg>SVG 画布画布是无限大的，意味着你能够在画布上画无限大的内容，然而，当你画的内容超过svg视窗大小的时候你是看不到的，但画布的内容是存在的，好比css中的overflow:hidden属性只是遮挡了可视区域的内容。 从一个简略的例子看下。 <svg> <circle cx="0" cy="0" r="50" fill="green" /></svg> 咱们画了一个圆，然而在svg视窗里并未显示全副的圆，那是因为圆的核心默认是坐标系的（0，0）地位。 当咱们对svg设置overflow: visible;时便显示了残缺的圆。 设置圆的核心，让其显示在svg视窗中 <circle cx="50" cy="50" r="50" fill="green" /> svg预约义的形态矩形 <rect>圆形 <circle>椭圆 <ellipse>线 <line>折线 <polyline>多边形 <polygon>门路 <path>SVG Stroke相干SVG提供了一个范畴宽泛stroke 属性。 strokestroke-widthstroke-linecapstroke-dasharraystroke-dashoffset这些属性很罕用，尤其是stroke-dasharray和stroke-dashoffset组合咱们能够实现很多活泼的进度成果。 stroke 属性Stroke属性定义一条线，文本或元素轮廓色彩： stroke-width 属性stroke- width属性定义了一条线，文本或元素轮廓厚度： stroke-linecap 属性strokelinecap属性定义不同类型的凋谢门路的终结： <svg> <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>stroke-dasharray 属性strokedasharray属性用于创立虚线。 stroke-dasharray为一个参数时： 其实是示意虚线长度和每段虚线之间的间距 两个参数或者多个参数时：一个示意长度，一个示意间距 ...

最近在工作中做一个h5相干的半圆进度组件需要，便开始学习了下svg。 SVG 是应用 XML 来形容二维图形和绘图程序的语言，SVG指可伸缩矢量图形 (Scalable Vector Graphics) SVG根本属性SVG的坐标零碎在介绍其它属性时，必须先介绍svg的坐标零碎，和咱们高中学的坐标系有点不同，也能够说是第一象限按x轴翻转失去svg的坐标系。y轴右方x为正值，x轴下方y为正值。 SVG 值的单位在svg中默认的单位为px，能够写单位，也能够不写单位。 svg视窗大小大小每次你创立了一个新的SVG元素，你也就创立了一个新的SVG视窗。视窗的大小等于你为SVG元素设置的宽度和高度。svg在绝大多数浏览器中，默认大小为长300px，宽150px的大小，理论利用中举荐制订svg的width和height值。 <svg width="100" height="100"></svg>SVG 画布画布是无限大的，意味着你能够在画布上画无限大的内容，然而，当你画的内容超过svg视窗大小的时候你是看不到的，但画布的内容是存在的，好比css中的overflow:hidden属性只是遮挡了可视区域的内容。 从一个简略的例子看下。 <svg> <circle cx="0" cy="0" r="50" fill="green" /></svg> 咱们画了一个圆，然而在svg视窗里并未显示全副的圆，那是因为圆的核心默认是坐标系的（0，0）地位。 当咱们对svg设置overflow: visible;时便显示了残缺的圆。 设置圆的核心，让其显示在svg视窗中 <circle cx="50" cy="50" r="50" fill="green" /> svg预约义的形态矩形 <rect>圆形 <circle>椭圆 <ellipse>线 <line>折线 <polyline>多边形 <polygon>门路 <path>SVG Stroke相干SVG提供了一个范畴宽泛stroke 属性。 strokestroke-widthstroke-linecapstroke-dasharraystroke-dashoffset这些属性很罕用，尤其是stroke-dasharray和stroke-dashoffset组合咱们能够实现很多活泼的进度成果。 stroke 属性Stroke属性定义一条线，文本或元素轮廓色彩： stroke-width 属性stroke- width属性定义了一条线，文本或元素轮廓厚度： stroke-linecap 属性strokelinecap属性定义不同类型的凋谢门路的终结： <svg> <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>stroke-dasharray 属性strokedasharray属性用于创立虚线。 stroke-dasharray为一个参数时： 其实是示意虚线长度和每段虚线之间的间距 两个参数或者多个参数时：一个示意长度，一个示意间距 ...

一、装置依赖包npm i -D svg-sprite-loader二、配置vue.config.js文件在chainWebpack中减少下列配置 chainWebpack (config) { config.module.rule('svg') .exclude.add(resolve('src/icons')) config.module.rule('icons') .test(/\.svg$/) .include.add(resolve('./src/icons')).end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) }三、实现SvgIcon组件组件构造如下： <template> <svg :class="svgClass" v-on="$listeners"> <use :xlink:href="iconName" /> </svg></template><script>export default { props: { iconClass: { type: String, required: true }, className: { type: String, default: '' } }, computed: { iconName () { return `#icon-${this.iconClass}` }, svgClass () { if (this.className) { return 'svg-icon ' + this.className } else { return 'svg-icon' } } }}</script><style lang="scss">.svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}</style>四、根目录下创立icons/svg目录用于寄存咱们所须要用的svg文件 ...

一、装置依赖包npm i -D svg-sprite-loader二、配置vue.config.js文件在chainWebpack中减少下列配置 chainWebpack (config) { config.module.rule('svg') .exclude.add(resolve('src/icons')) config.module.rule('icons') .test(/\.svg$/) .include.add(resolve('./src/icons')).end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) }三、实现SvgIcon组件组件构造如下： <template> <svg :class="svgClass" v-on="$listeners"> <use :xlink:href="iconName" /> </svg></template><script>export default { props: { iconClass: { type: String, required: true }, className: { type: String, default: '' } }, computed: { iconName () { return `#icon-${this.iconClass}` }, svgClass () { if (this.className) { return 'svg-icon ' + this.className } else { return 'svg-icon' } } }}</script><style lang="scss">.svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}</style>四、根目录下创立icons/svg目录用于寄存咱们所须要用的svg文件 ...

一、装置依赖包npm i -D svg-sprite-loader二、配置vue.config.js文件在chainWebpack中减少下列配置 chainWebpack (config) { config.module.rule('svg') .exclude.add(resolve('src/icons')) config.module.rule('icons') .test(/\.svg$/) .include.add(resolve('./src/icons')).end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) }三、实现SvgIcon组件组件构造如下： <template> <svg :class="svgClass" v-on="$listeners"> <use :xlink:href="iconName" /> </svg></template><script>export default { props: { iconClass: { type: String, required: true }, className: { type: String, default: '' } }, computed: { iconName () { return `#icon-${this.iconClass}` }, svgClass () { if (this.className) { return 'svg-icon ' + this.className } else { return 'svg-icon' } } }}</script><style lang="scss">.svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}</style>四、根目录下创立icons/svg目录用于寄存咱们所须要用的svg文件 ...

bug如下： {/*数据源治理-mysql图标*/}<symbol width='46px' height='46px' viewBox='0 0 46 46'> <title>数据源治理-mysql图标</title> <g stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'> <g id='icon-private-mysql' transform='translate(-668.000000, -154.000000)'> <g id='Group-3' transform='translate(668.000000, 154.000000)'> <path d='M5.32907052e-14,0 L42,0 C44.209139,-4.33003142e-15 46,1.790861 46,4 L46,46 L5.32907052e-14,0 Z' id='Rectangle-Copy-10' fill='#FF9F00'></path> <path d='M10.1366187,12.8551901 L11.5556187,12.8551901 L14.2946187,19.1471901 L14.3276187,19.1471901 L17.0556187,12.8551901 L18.4746187,12.8551901 L18.4746187,></path> </g> </g> </g></symbol> 解决方案如下：去掉width和height，将id放入symbol属性中，其余不变 {/*数据源治理-mysql图标*/}<symbol id='icon-private-mysql' viewBox='0 0 46 46'> <title>数据源治理-mysql图标</title> <g stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'> <g transform='translate(-668.000000, -154.000000)'>起因：1.去掉width和height，利用viewBox和font-size对图标设置大小2.因为其余共事对symbol层id做了款式，放在g层不对 应用的定位，父级元素Card的position为relative，子集Iconfont的position为absolute

不支持 svg 标签web 可以，但是小程序不可以，只能使用 image 标签引用 svg 文件。 解决办法有第三方插件可以提供变相支持：https://github.com/Tencent/omi/tree/master/packages/cax 但有差异，存在风险，不建议使用。 不支持内嵌图片的 svg<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/></svg>svg 如果内部有 image，image 部分会显示“图裂”。 解决办法图片转 base64 可以展示。

作者|数澜UED团队 没有飞线的地图就像一个发际线上移的中年人一样平淡无奇。 —— By 胖子每年春运和双十一的统计图都因为有飞线动效才更加吸引眼球，今天要为大家带来一根漂亮飞线要用什么姿势生成才能。 SVG本篇是主讲SVG来绘制飞线的，所以强大的SVG必定能完成我们绘制飞线效果的各种需求。首先我先为各位介绍下完成这根线需要用到的一些小知识点。 Path元素 path元素是SVG基本形状中最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。这里我们只需要用它来绘制一条曲线。 首先我们先创建好这根曲(tou)线(fa)。 OK，这根头发我们已经在屏幕上放好了，如果你将path元素的曲线无限放大会发现，其实它是由非常多的坐标点相互连接组成的。这个时候脑洞放一下，如果我们能获取到这些点是不是就是获取了线的绘制轨迹。就可以逐帧绘制飞线了动效了。 那要如何来获取和使用这些坐标点呢？ 勤奋的查阅MDN，我发现这个问题强大的SVG已经帮我们解决了，可以使用getTotalLength和getPointAtLength这两个方法来搞定。 SVGPathElement.getTotalLength但因为SVG中绘制的都是矢量图，所以path元素不存在是由若干个点构成的，所以调用该方法会返回该path元素从起始点到终点的总长度（浮点数）。 尽管和预期有所差别，但搭配上下面的getPointAtLength方法我们依然能完成之前预想的实现方法。 SVGPathElement.getPointAtLength调用该方法会根据传入到起点的距离值来计算返回对应的path元素坐标点的位置x、y值。 通过组合使用这两方法，我们可以自己定义这段轨迹上有有多少个坐标点，并且可以获取对应这些点的坐标值。 下面我们使用D3来操作这些DOM节点获取对应的节点数据信息 首先我们需要先定义好飞线轨迹是由多少个点构成的： const pointNum = 1500 接下来我们可以通过方法将获取到的轨迹总长度进行平分得到单位长度unit，然后再调用getPointAtLength获取对应距离的坐标值。 const pointNum = 1500const path = d3.select('#line')const pathline = path.node()const totalLength = pathline.getTotalLength()const points = []const unit = totalLength / pointNumfor (let i = 0; i <= pointNum; i += 1) { points.push(pathline.getPointAtLength(i * unit))}接下来我们就可以通过这些数据绘制飞线动效了！ 接下来我们就可以通过这些数据绘制飞线动效了！ 接下来我们就可以通过这些数据绘制飞线动效了！ 重要的话我们来强调三遍。 飞线动效-1如下图，其实实现飞线具体头部深、尾部浅效果可以通过绘制若干透明度逐渐递减的圆来达到。（Echarts飞线使用类似思路） 接下来所需要做的就是让上面的飞线像下图的矩形一样，让它按照对应的轨迹路线来进行移动。 ...

最近用了一个多月的时间完成了一个数据可视化大屏，大概的效果是这个样子的，当然这只是三屏中的其中一屏，我会用几篇文章分别介绍各个点的实现方式和一些相应的知识点。 首先这次会介绍右下角的间断圆环图的实现，圆环图会根据数据多少，进行相应的变化。并且，圆环的内容是间断的，且带有从浅到深的渐变。 实现初尝看到图形，我们首先会想到它跟圆环的结构稍有类似，那我们可以按照实现圆环的思路可以通过以下方式实现，使用左右两个半圆，并控制其遮罩的旋转，来控制进度，类似以下这种： 然后，我们可以将两边的半圆，换做我们的底图，进行拼接。这时候我们会发现，如果想要遮罩完全遮住底图的话，我们的整个图形就没办法做成透明的了。尴尬，只能换思路。 快乐的使用SVG头痛之余，借鉴了一下网上的其他圆环的解决方案，发现了一篇张鑫旭大神的文章，很巧妙的用stroke-dasharray实现了圆环进度。 大概原理如下： stroke-dasharray在SVG中表示描边是虚线，两个值，第一个是虚线的宽度，第二个是虚线之间的间距。所以，我们只要让这根线，保持只有一段实线+一段虚线就行了，也就是 实线长度(对应数据) + 虚线长度 = 圆环周长 代码如下(直接): <svg width="440" height="440" viewbox="0 0 440 440"> <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#D1D3D7" fill="none"></circle> <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#00A5E0" fill="none" transform="matrix(0,-1,1,0,0,440)" stroke-dasharray="0 1069"></circle></svg>朝最终效果进发按照前面的思路，实现一个间断圆环的思路也就顺理成章的出来了。我们可以把整个圆环分成N份，每份包含一段实线，一段虚线。例如我们要实现80%的圆环，对应的stroke-dasharray就是: const dashItemLength = (周长 / (N * 2))// 向上取整 保证有整数个数据const dashItemNum = Math.ceil(N * 0.8)// 这里 实线虚线的长度是相同的, 减1 是预留出最后的空白const dashLine = `${dashItemLength} ${dashItemLength},`.repeat(dashItemNum - 1)// 最后需要将最后的虚线长度进行补齐const restLength = 周长 - (dashItemLength * dashItemNum)const dashLineArray = dashLine.split(',')dashLineArray.push(`${dashItemLength} ${restLength}`)const result = dashLineArray.join(' ')大概效果就是这样子: ...

大家好，这里是 UX（交互体验设计师）& 前端开发，并且还喜欢画画的 yuki！@yuneco。 在这篇文章里，为了能够更加轻松地去使用 Vue 和 css animation，基础的部分，将会跟大家一步步的详细解释。目标如下图↓所示，用 JavaScript 自由的控制动画。 源码送上 https://github.com/yuneco/css-anime-tutorial 目录那么先从最简单的 svg 标签开始。用 Vue 自由地配置、使其变形。然后利用 css 的 transition 来做动画，最后把动画抽象封装，运用到更加复杂的场景上。 制作 svg创建 Vue 项目显示 svg能够自由配置能够更自由更大角度的变化赋予动画能够连续进行动画抽象封装动画注意点这篇文章介绍的方法并不是使用动画时通用的方法。想要制作更复杂的动画，请使用 anime.js 或者 pixi.js。这篇文章并没有使用专门的动画库，而是自己封装的动画，目标是为了更加深入地理解 Vue、javascript、css 动画。虽然还有很多理由，但能点亮自己的【自己组建能够理解的动画】这方面的技能树，无疑也是很高兴的。文章稍稍有点长，如果你能看完的话，那我也很高兴。 制作 svg第一步，显示这篇教程要使用到的 svg，用 Illustrator 制作自己喜欢的角色去，依次从菜单上选择 [ファイル] -> [書き出し] -> [スクリーン用に書き出し]，格式选择 svg，从右边齿轮一样的图标，显示设定。 设定看起来有点复杂的????，这里在 Vue 也没有那么麻烦的去使用 svg，所以这里的设定不需要太在意，右下角的 Responsive(レスポンシブ) 选择记得要取消掉。 设定好了之后，「設定を保存」->「アートボードを書き出し」导出 svg 文件，没有 Illustrator 的同学用其它的文件也 ok。怕麻烦的同学，我姑且在 github 上也放了一份... 用浏览器打开，大概就是这种感觉，名字叫 tama桑，现在刚决定的。为了方便理解，我特意加了 1 像素的边框。 创建 Vue 项目不管怎么说，不创建的 Vue 项目的话，就没法开始。运行，vue create 项目的名字 创建项目，就像下面一样，当然，你也可以根据自己的喜好来。 ...

遮罩层，如果学过Flash的同学应该都听过，跟PS的剪切蒙版差不多。大概的效果就是被遮罩层与遮罩层不透明的部分重叠的部分是可见的，而遮罩层是不显示的。类似于现实世界中一张A4卡纸剪了个洞，我们可以通过洞看卡纸后面的物体，这里卡纸相当于遮罩层，只不过洞是遮罩层不透明的部分，其他部分是遮罩层透明的部分，与我们想象中的正好相反。 CSS中也有遮罩这个属性 —— mask-image，但是这么多年了，很多浏览器还不支持，Chrome还需要加前缀。利用mask-image能做出一些不错的效果，比如 https://codepen.io/inegoita/p...。 以前做过活动券的需求，右下角是水印，不同的券颜色不一样。如果直接用图片的话可能就需要不同图片，而用mask-image，只需要一张图片，变换颜色用CSS控制就可以了。http://demo.vczhan.com/css/ma... 前几天，一个朋友接到一个需求，用一个心形容器里面的水波来体现亲密度，水波是动画效果并且限制在容器里。 想到用mask-image这个属性正合适，于是要来了心型图片，拿到设计师导出的SVG文件，用SVGO压缩下得到一个SVG。另外水波是显示在内层容器里的，原来是想直接缩小心形SVG，发现还是有些差别的，还好可以从这个SVG里直接提取出内层的心形SVG 接下来是做水波，用SVG写比较简单，先定义一条波纹路径，用二次贝塞尔曲线画出重复的两段横向波纹，方便后面做动画，然后引用这个路径做两条波纹出来。 <svg viewBox="0 0 120 125"> <defs> <path id="wave" d="M 0 0 C 30 0, 30 15, 60 15, 90 15, 90 0, 120 0, 150 0, 150 15, 180 15, 210 15, 210 0, 240 0 v 125 h -240 z"/> </defs> <use class="wave" xlink:href="#wave" x="0" y="1" /> <use class="wave" xlink:href="#wave" x="0" y="0" /></svg>最后在心形容器的元素上加上遮罩，把水波放在这个容器里，加上动画就好了。 其他细节看demo代码。 参考：https://developer.mozilla.org...

作者：心叶时间：2019-05-29 22:31 一.简介首先，让我们来了解一个这个库主要解决的问题是什么，如何使用以及问题反馈等基本信息。 1.1 关注的问题本库致力于提供更简单的Web端二维绘图接口，主要包括这些方面：画笔、辅助计算、结点操作和一些零碎的小工具方法。我们希望绘图是简单而有趣的、高效而愉悦的！ 主要是在svg和canvas2D上绘图，虽然有提供比如Maritx4坐标变换等三维相关方法，这是考虑到一些潜在的需求。 1.2 如何使用如果你开发的是一个web项目，直接在页面引入打包后的文件后即可（在代码中通过image2D或$$调用）： <script src="./build/image2D.min.js" type="text/javascript"></script>如果你想通过npm方式管理，首先你需要通过命令行安装image2D，就像这样： npm install --save image2d安装好了以后，在需要的地方引入即可： import $$ from 'image2d';1.3 获取帮助在使用image2D的时候，如果遇到任何疑惑或问题，包括建议或对未来版本的想法，请先在 Github issue 上查找是否存在相似内容，然后进行补充或追问，当然也可以增加新的话题进行交流，除非特殊情况，你会在48小时内获得 作者 回复。 二.结点操作为了绘图的方便，我们提供了最基本的结点相关操作。因为这些操作是为了绘图而开发的，可能和纯粹的结点操作方法在设计上有所不同，请知悉。 2.1 结点对象所有的结点操作都是由结点对象提供的，因此，我们首先来看看如何创建一个结点对象： var imageObject=$$(selector[, context]);如上所示，通过执行$$或image2D方法即可获取一个结点对象，我们可以传递二个参数来确定当前结点对象维护的结点是哪些。 结点对象维护了一些结点，调用结点对象上的方法，就是对维护的这些结点进行操作。 第一个参数selector（称为选择器）是必须的，用以确定当前维护的结点是哪些。 第二个参数context是可选的，默认选择器在全局查找，你也可以通过传递一个dom结点指定查找上下文（id选择器会忽略此参数直接在全局查找）。 选择器 任何合法的选择器都应该是下列中的某一种： 模板字符串，比如'<g>'、'<canvas>非常抱歉，您的浏览器不支持canvas!</canvas>'等。ID选择器，比如'#demo'会选中id是'demo'的第一个标签。class和标签选择器，比如'.cls'、'div'、'div.cls'和'g.info.warn'等。全部选择器，也就是字符串'*'，会选中全部结点。非查询选择器，包括：结点，结点数组和结点对象。这类选择器不会进行查找，直接把传递的结点作为维护结点，因此也会忽略查找上下文。筛选函数，传递一个函数，函数形参是当前面对的结点，通过返回true或false来判断是否把当前面对的结点加入结点对象中。创建好了结点对象以后，后续依旧可以对维护的结点进行筛选后获取新的结点对象： var new_imageObject=imageObject.filter(filterback);返回新的结点对象，不会修改原来的结点对象。其中filterback叫做筛选函数，有二个形参，分别是当前面对结点序号和维护了当前面对结点的结点对象，通过返回true或false来判断是否把当前面对的结点加入新创建的结点对象中。 2.2 编辑把当前维护的结点加到目标结点内部的结尾： imageObject.appendTo(target[, context]);target是一个合法的选择器即可，context是一个结点，表示目标结点查找上下文，可选，默认全局查找，下同。 把当前维护的结点加到目标结点内部的开头： imageObject.prependTo(target[, context]);把当前维护的结点加到目标结点之后： imageObject.afterTo(target[, context]);把当前维护的结点加到目标结点之前： imageObject.beforeTo(target[, context]);从页面中删除当前维护的结点： imageObject.remove();设置或获取结点中的文本： imageObject.text([content]);2.3 样式和属性修改或获取结点样式： imageObject.css();通过不同的参数来确定是获取样式还是设置样式，具体有下列参数选项可选： (key):获取指定样式。(key,value):设置指定样式。():获取全部样式。(json):设置大量样式。设置或获取结点属性： imageObject.attr();和样式css方法类似，也是通过具体参数来确定是获取还是设置样式： (attr):获取属性。(attr,value):设置指定属性值。(json):设置大量属性。2.4 事件相关给维护的结点绑定事件： imageObject.bind(eventType, callback);获取鼠标相对当前维护的元素左上角位置： imageObject.position(event);2.5 数据绑定绘图就离不开数据，把数据和结点关联起来，会简化结点管理和数据保存问题，这里涉及四个核心方法：data、datum、enter和exit，还有一些相关方法（因为结点对象的各个方法之间不完全是独立的）。 把数据绑定到一组结点或返回第一个结点数据： imageObject.datum();通过具体的参数来判断是获取还是绑定，有下列参数选项可选： ():不带任何参数表示获取数据。(data):带一个参数表示设置结点对象维护的全部结点数据为data。(data, calcback):和带一个参数类似，只不过绑定的数据是经过calcback函数重新计算后返回的值，该函数有二个形参：data和index。把一组数据绑定到一组结点或返回一组结点数据： ...

背景通常可视化地图我们使用geojson数据+(echarts/highchart等)制作,经常我们业务需要的地图没有合适geojson数据,原因大致如下: 《测绘法》图表地图通常是简易版地图,很难与真实地图一致,导致结果:正规网站不能提供下载第三方能下载到的矢量地图数据只能到国级省级县区级别的行政划分变动频繁(比如前两年的杭州地图不包括临安)地图区域划分可能不同于行政划分思路本文给出的是本人独家解决方法是通过AI制作地图数据,以真实地图或者草图为底,秒出边界和中心,导出svg,通过正则(下面提供一个gulp插件转)转为geojson数据; 为什么使用AI有图层有组合有钢笔制作准确省事有前进有后退不怕出错出了制作地图geojson数据,还可以利用生产svg做各种吊炸天效果(比如3D地图晒个demo)本人美工大佬,精通PS AE AI等等;秀张鼠绘 案例使用方法1.下载git clone https://github.com/yuhonyon/svg2geojson.git2.安装npm i3.使用将 svg 文件直接放在 svg/ 目录下输入命令gulp在 dist/ 目录下将生产对应的目录,目录下有转换后的 geojson 文件以及行政中心的坐标文件和 svg 原文件 教学制作地图 geojson 数据的所有步骤设计地图草稿根据设计稿使用 ai 画矢量地图导出 svg使用 gulp 将 svg 转换为 geojson使用图表库制作地图设计地图草稿设计师设计地图草稿(只需明确行政划分区域即可),如下图 使用 AI 描出矢量图将设计草稿导入 AI新建图层,在图层内跟据设计稿使用钢笔工具描出一个行政区的行政(使用多边形描边)将该图层取名为行政区名字重复第 2 步,描出所有行政区 选择所有描点,转换尖角,去除不小心画出的曲线(导出的 svg 不是由 polygon 组成的而是 path 的时候使用这个方法,建议描完后就使用一次)在每个图层中心处再画一个圆形或者椭圆删除设计草稿的图层导出 svg，没有出错的话格式应该如下如果发现 poluygon 标签变成了 path,请注意第 4 步骤** 注意:导出的 svg 转换出的 geojson 制作的地图将会是垂直颠倒的(可能是坐标轴不一样,一个左上角一个右下角),所以我们要把我们制作的 AI 图垂直翻转后再导出 svg ** 将 svg 转换为 geojson效果

目前有很多公司都有工作流的产品。关于工作流的架构大致都是将工作流制定一个规范、标准数据模板，后台程序再解析这些数据模板。一些公司的工作流是数据库配置的，其实推荐将工作流可视化，这样就会节省人力和物力来读懂这些数据。关于流程可视化必然想到了在页面直接操作流程，如果想在页面操作就需要将流程数据图像化，通过操作图像生成可以解析的数据格式。 目前前端技术已经足够先进，我们完全无需再使用传统的ES3、ES5去实现这个功能，强大的ES6（面向对象思想）简化了曲折的路径，让只懂一点点JS的后端开发人员完全可以上手实现这一功能。 首先，需要配置nodejs环境，因为强大的nodejs有能够编译ES6的组件babel。https://nodejs.org/en/ 其次，需要创建一个工程，引入webpack打包工具，我们最终会将所有js文件打包成一个bundle.js的文件并压缩混淆。https://webpack.github.io/ 最后，我们需要引入编译器babel。https://www.babeljs.cn/ 环境搭好之后，我们开始工程的设计。 页面布局是流程操作栏，工具箱（流程组件），绘图区。我们通过操作工具栏的组件，在绘图区绘制出流程的环节模块，每个模块都需要设置各种属性，当然，对于整个流程也需要属性设置。 布局定下来之后，就该实现如何拖拽了。关于这部分可以了解一下H5的流程拖拽方法，这里推荐大神张鑫旭的文章http://www.zhangxinxu.com/wor… 有了流程的模块，当然还需要线路的指向。这里需要使用svg实现这个功能。我们需要在画布区域放置一个svg的显示区，当拖拽工具的线条在这里生成svg的路径path，然后将线条的两端连接两个环节模块，这就需要通过改变path的路径属性来实现。具体svg的基础知识可以参考大神阮一峰的文章http://www.ruanyifeng.com/blo… 现在就剩下按照自己的需求继续完善具体功能了，看看我自己做的功能吧： 有问题的可以在加QQ交流群交流：1003516412

Created 2019-4-4 22:02:27 by huqi Updated 2019-4-4 23:12:34 by huqi↑开局一张图，故事全靠编↑本地资源无法通过 WXSS 获取都9102年了，我居然还会犯如此低级的错误。不经想起去年犯的一个更低级的错误，事情的经过是这样的，去年@肖蜀黍 在某个群里丢了一个小程序链接–tell心语,这个小程序本身就具有传奇色彩，背后的故事更是感动人心，就是现实版的解忧杂货店；主要的功能是写信，也就是文字输入。然后，我居然脑残地去测试xss！！！不学无术，还要自命不凡，像我这样的没被祭天就是万幸了。这次，又是基本的常识都没掌握，直接淹死在浅坑里。background-image：可以使用网络图片，或者 base64，或者使用<image/>标签。这个是常识，连入门级小程序员都知道的。那我究竟写了个什么B.U.G？毫无疑问，一定是在BG中直接引用了本地图片。乳此低级的错误，一定要贴出来，示众以鞭策！.refresh-icon{ background: url(‘refresh.svg’);}.del-icon{ background: url(‘del.svg’);}获取iconfont的svg图作为老司机的“幼儿班程序员”，应该是没有资格拿到切好的图标了，没办法，技不如人，只能自己动手去啥都有的网上找找。关于图标，我最先想到的是阿里巴巴矢量图标库，这个由阿里妈妈MUX倾力打造的矢量图标管理、交流平台，设计师可以将图标上传到这个平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。虽然可以将图标转化为字体应用，但对于我来说，就使用那么几个图标，实在是不想引用一大堆css、ttf等文件，只想用下svg。具体怎么操作，胸中自然有了竹子。搜索和UI图一模一样的图标，建议按照英文关键字查询，如del、refresh等点击下载进入下载模态详情页，选择合适的颜色下载svg转换svg为background既然官方文档说了，不让直接引用本地图片，但给了三条路，那我就随便远一条喽，反正我不想用网络图片，我也不想用image标签，那就只有转成base64喽，至于什么是base64，我也不知道，那就超度一下喽：☛base64。但是怎么快速将svg转换成这个base64甚至直接输出成css样式呢？我说，首先您得有工具得到svg源码，我用vscode，直接打开svg就是svg源代码；然后转base64，偶然发现了国外大佬在codepan上的在线实现,文章的话可以参考下“优化数据uris中的svgs” ,我特意fork了一份来学习，感兴趣的可以看下源码。有了这个工具，svg生成background也就是我专门干的事=copy&paste获取svg源码生成background重写background既然base64已经手到擒来了，那么实现图标按钮还会远吗，来来来，有请代码说话：超级简单！！！搜衣滋！.my-icon{ background-size: cover; display: inline-block; width: 50rpx; height: 50rpx; vertical-align: middle; margin-right: 4px;}.refresh-icon{ background-image: url(“data:image/svg+xml,%3C?xml version=‘1.0’ standalone=‘no’?%3E%3C!DOCTYPE svg PUBLIC ‘-//W3C//DTD SVG 1.1//EN’ ‘http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg t=‘1554354671724’ class=‘icon’ style=’’ viewBox=‘0 0 1024 1024’ version=‘1.1’ xmlns=‘http://www.w3.org/2000/svg' p-id=‘1543’ xmlns:xlink=‘http://www.w3.org/1999/xlink' width=‘200’ height=‘200’%3E%3Cdefs%3E%3Cstyle type=‘text/css’%3E%3C/style%3E%3C/defs%3E%3Cpath d=‘M936.571429 603.428571q0 2.857143-0.571429 4-36.571429 153.142857-153.142857 248.285715T509.714286 950.857143q-83.428571 0-161.428572-31.428572T209.142857 829.714286l-73.714286 73.714285q-10.857143 10.857143-25.714285 10.857143t-25.714286-10.857143-10.857143-25.714285v-256q0-14.857143 10.857143-25.714286t25.714286-10.857143h256q14.857143 0 25.714285 10.857143t10.857143 25.714286-10.857143 25.714285l-78.285714 78.285715q40.571429 37.714286 92 58.285714t106.857143 20.571429q76.571429 0 142.857143-37.142858t106.285714-102.285714q6.285714-9.714286 30.285714-66.857143 4.571429-13.142857 17.142858-13.142857h109.714285q7.428571 0 12.857143 5.428572t5.428572 12.857142z m14.285714-457.142857v256q0 14.857143-10.857143 25.714286t-25.714286 10.857143h-256q-14.857143 0-25.714285-10.857143t-10.857143-25.714286 10.857143-25.714285l78.857142-78.857143q-84.571429-78.285714-199.428571-78.285715-76.571429 0-142.857143 37.142858T262.857143 358.857143q-6.285714 9.714286-30.285714 66.857143-4.571429 13.142857-17.142858 13.142857H101.714286q-7.428571 0-12.857143-5.428572T83.428571 420.571429v-4q37.142857-153.142857 154.285715-248.285715T512 73.142857q83.428571 0 162.285714 31.714286T814.285714 194.285714l74.285715-73.714285q10.857143-10.857143 25.714285-10.857143t25.714286 10.857143 10.857143 25.714285z’ p-id=‘1544’ fill=’%23ffffff’%3E%3C/path%3E%3C/svg%3E”);}.del-icon{ background-image: url(“data:image/svg+xml,%3C?xml version=‘1.0’ standalone=‘no’?%3E%3C!DOCTYPE svg PUBLIC ‘-//W3C//DTD SVG 1.1//EN’ ‘http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg t=‘1554355910565’ class=‘icon’ style=’’ viewBox=‘0 0 1024 1024’ version=‘1.1’ xmlns=‘http://www.w3.org/2000/svg' p-id=‘2306’ xmlns:xlink=‘http://www.w3.org/1999/xlink' width=‘200’ height=‘200’%3E%3Cdefs%3E%3Cstyle type=‘text/css’%3E%3C/style%3E%3C/defs%3E%3Cpath d=‘M817.968553 215.897142l-169.357176 0 0-58.869782c0-25.391297-20.657482-46.048779-46.048779-46.048779l-181.125197 0c-25.391297 0-46.048779 20.657482-46.048779 46.048779l0 58.869782-169.357176 0c-25.391297 0-46.048779 20.657482-46.048779 46.048779l0 71.631434c0 25.391297 20.657482 46.048779 46.048779 46.048779l28.321022 0 0 425.947112c0 59.246359 48.200792 107.447151 107.447151 107.447151l340.40076 0c59.246359 0 107.447151-48.200792 107.447151-107.447151L789.647531 379.626133l28.321022 0c25.391297 0 46.048779-20.657482 46.048779-46.048779l0-71.631434C864.017332 236.554624 843.35985 215.897142 817.968553 215.897142zM426.553932 162.14389l170.892135 0 0 53.753251-170.892135 0L426.553932 162.14389zM738.482221 805.574269c0 31.033807-25.248034 56.281841-56.281841 56.281841L341.79962 861.85611c-31.033807 0-56.281841-25.248034-56.281841-56.281841L285.517779 379.626133l452.964442 0L738.482221 805.574269zM812.852022 328.460824l-601.704045 0 0-61.398372 203.227588 0c2.302439 0.356111 4.66116 0.542352 7.061836 0.542352l181.125197 0c2.400676 0 4.759397-0.186242 7.062859-0.542352l203.226564 0L812.852022 328.460824zM513.023306 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655-14.128789 0-25.582655 11.453866-25.582655 25.582655l0 288.572348C487.440651 771.866562 498.894518 783.320429 513.023306 783.320429zM645.541459 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655s-25.582655 11.453866-25.582655 25.582655l0 288.572348C619.958804 771.866562 631.41267 783.320429 645.541459 783.320429zM380.505154 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655s-25.582655 11.453866-25.582655 25.582655l0 288.572348C354.922499 771.866562 366.376365 783.320429 380.505154 783.320429z’ p-id=‘2307’ fill=’%23ffffff’%3E%3C/path%3E%3C/svg%3E”);}附上效果图：svg转换核心源码// 用于创建优化的svg url的函数// Version: 1.0.6@function svg-url($svg){ // // 补齐命名空间 // @if not str-index($svg,xmlns) { $svg: str-replace($svg, ‘&ltsvg’,’&ltsvg xmlns=“http://www.w3.org/2000/svg"'); } // // 避免一大块的字符串 // 抛出“堆栈级别太深”错误 // $encoded:’’; $slice: 2000; $index: 0; $loops: ceil(str-length($svg)/$slice); @for $i from 1 through $loops { $chunk: str-slice($svg, $index, $index + $slice - 1); // // 编码 // $chunk: str-replace($chunk, ‘”’, ‘'’); $chunk: str-replace($chunk, ‘%’, ‘%25’); $chunk: str-replace($chunk, ‘#’, ‘%23’); $chunk: str-replace($chunk, ‘{’, ‘%7B’); $chunk: str-replace($chunk, ‘}’, ‘%7D’); $chunk: str-replace($chunk, ‘&lt;’, ‘%3C’); $chunk: str-replace($chunk, ‘&gt;’, ‘%3E’); // // 预计列表 // // 保持大小并缩短编译时间 // … 只添加记录的失败 // // $chunk: str-replace($chunk, ‘&’, ‘%26’); // $chunk: str-replace($chunk, ‘|’, ‘%7C’); // $chunk: str-replace($chunk, ‘[’, ‘%5B’); // $chunk: str-replace($chunk, ‘]’, ‘%5D’); // $chunk: str-replace($chunk, ‘^’, ‘%5E’); // $chunk: str-replace($chunk, ‘`’, ‘%60’); // $chunk: str-replace($chunk, ‘;’, ‘%3B’); // $chunk: str-replace($chunk, ‘?’, ‘%3F’); // $chunk: str-replace($chunk, ‘:’, ‘%3A’); // $chunk: str-replace($chunk, ‘@’, ‘%40’); // $chunk: str-replace($chunk, ‘=’, ‘%3D’); $encoded: #{$encoded}#{$chunk}; $index: $index + $slice; } @return url(“data:image/svg+xml,#{$encoded}”); } // Background svg mixin @mixin background-svg($svg){ background-image: svg-url($svg); } // 替换字符串中的字符的辅助函数@function str-replace($string, $search, $replace: ‘’) { $index: str-index($string, $search); @return if($index, str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace), $string); } 总算是又get了一个知识点，最近做小程序，遇到的难题还是挺多的，比如还没有解决的wx.redirectTo闪屏问题，有大佬要是恰好遇到过类似的坑，欢迎多多指教！ ...

一步步教你用CSS添加SVG过滤器翻译：疯狂的技术宅原文：https://www.creativebloq.com/…本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章自21世纪初以来，SVG就存在了，但仍有一些有趣的方法去用它。在本教程中，重点将放在 SVG 的过滤器上 —— 但不只是将它们应用于 SVG 图像，我将向你展示如何将它们应用于任何常规页面的内容上。实际上我们是通过告诉 CSS 过滤器所拥有的 ID，然后再把过滤器应用于 SVG 的方式来实现。使用同样的方法，过滤器也可以用于常规文本。关于这一点的好处在于，你可以轻松的为文本添加一些出彩的特效，以前只能通过使用 Photoshop 滤镜并保存为图像来实现。使用SVG过滤器，文本仍然是可访问并可选的，因为它只是页面上的常规文本元素。这里的代码将为文本创建一个置换贴图，这个贴图还包含一个 alpha 贴图，使其看起来像水一样，并符合我们页面的主题。然后创建另一个过滤器，使菜单显示为水斑点，它们会稍微粘在一起，但会随着它们向远处移动而分开。这也是为了和特定页面的主题保持一致，并展示了将 SVG 过滤器用于其他内容的两种创造性方法。从FileSilo下载本教程的源码01. 开始首先，你需要从上面的链接下载项目文件。之后将项目文件夹 start 拖到代码 IDE 上，然后打开 index.html 页面。你将会看到一些已经写好的页面内容。接下来创建标题部分，这里将包含受 SVG 过滤器影响的标题。在 body 标签内添加代码。<div class=“bg”> <div class=“middle”> <h2 class=“headline”>Underwater Adventure Park</h2> <div class=“intro_block”>02. 完成标题现在标题已完成，所有文本都已就绪。如果你此刻在浏览器中查看页面，将看到一个带有一些文本的图像。当前标题仍然是没有样式的，接下来为它设置样式并应用 SVG 过滤器。<h3 class=“subhead”>Experience the Ocean <br>Like Never Before</h3> <p class=“intro”>Underwater Adventure Park is an experience unlinke anything you have ever had. Travel to the depths of the Ocean and walk among the Sea Life!</p> </div> </div> </div>03. 创建一个 SVG 过滤器SVG 代码可以添加到页面的任何位置，但是因为它不会被用户直接看到，所以最好将它放在闭合 body 标签之前的最底部。 SVG 过滤器产生一些波纹效果。请注意，过滤器具有 ID —— 这使 CSS 能够把它应用到页面上的另一个元素。<svg xmlns=“http://www.w3.org/2000/svg"> <filter id=“displacementFilter”> <feTurbulence type=“turbulence” baseFrequency=“0.004” numOctaves= “2” result=“turbulence” /> </filter></svg>04. 隐藏 SVG现在转到 page.css 文件，我们的新 CSS 会添加到所有其它CSS代码的顶部。这里的 SVG 被设置为根本不显示在页面上。为 h2 标记设置相对应的字体的字体。svg { display: none;}h2 { font-size: 5.5vw; font-family: ‘Crete Round’, serif;}05. 加入 headline把 line-height 设置为零，因为稍后标题将被加上动画效果，所以控制页面上的缩放很重要。它设定了 padding 值，使其周围能够有适量的空间，颜色也会改变。.headline { line-height: 0; display: inline-block; padding: 70px; color: #ccffff;06. 完成 headlineSVG 将用于替换标题文本在完成 headline 类后，下一行将 SVG 中的 displacementFilter ID应用于文本。 translate3d 确保用硬件加速去处理文本。把 scale 稍微改变一点，以确保当发生位移时看起来是正确的。 filter: url(#displacementFilter); transform: translate3d(0, 0, 0); transform: scaleY(1.8) rotateY(-2deg);}07. 替换它现在文本被替换了如果在此阶段测试过滤器，则波纹效果会完全取代文本。这很容易解决。回到 index.html 页面中的过滤器代码。这样将应用波纹和源图形（即文本），并将其应用为位移过滤器。尝试改变波纹的频率和振幅。<feDisplacementMap in2=“turbulence” in=“SourceGraphic” scale=“30” xChannelSelector=“R” yChannelSelector=“G” result=“disp” />08. 柔化边缘使用高斯模糊来柔化文本水边效果的边缘看起来有点扎眼。这可以用高斯模糊来解决。在置换贴图后面添加代码。当你刷新页面时，它确实模糊了文本，但位移也消失了。同样这些问题可以在实现效果的过程中被修复。<feGaussianBlur in=“SourceGraphic” stdDeviation=“15” result=“blr” />09. 组合两者把模糊和位移进行组合，可以获得更令人愉悦的效果在之前的高斯模糊下面添加复合线。你将看到会把模糊和位移效果结合在一起，并且还为文本创建了水润的半透明效果。它的边缘已经在某种程度上变得柔和了，但是这还不够。如果能把最初的模糊效果加入到这里效果会很好。<feComposite in=“blr” in2=“disp” operator=“in” result=“comp” />10. 合并模糊通过合并操作，它看起来会更好合并操作使前面的效果与模糊效果合并。现在看上去与背景图像很搭，就好像光线穿过了水面一样。对于文本来说它仍然是可选择的，并且是页面的一部分，这点和在 Photoshop 中作出的效果完全不一样。<feMerge result=“final”> <feMergeNode in=“blr” /> <feMergeNode in=“comp” /> </feMerge>11. 创建动画回到 page.css 文件并添加关键帧，如下所示。这将会把字体大小从零垂直宽度扩展到 5.5 垂直宽度。把它应用于标题后，文本会在屏幕上放大并被放置到位。随着文本的移动，位移也会随着长度的变化而变化，产生水纹效果。@keyframes scaler { from { font-size: 0vw; } to { font-size: 5.5vw; }}12. 更改 h2 样式替换 h2 以引入一些动画之前在步骤 4 中添加了 h2 样式。使用下面这段新代码替换旧代码，这段代码将为标题添加四秒的 CSS 动画。动画停止会停留在最后一个关键帧上。保存文件并在浏览器中测试，检查文本是否到位。h2 { line-height: 0; font-size: 0vw; animation-name: scaler; animation-duration: 4s; animation-fill-mode: forwards; font-family: ‘Crete Round’, serif;}13. 添加导航接下来让我们用另外一个 SVG 滤镜创建一个水斑动画。将以下导航内容添加到正文代码的最顶部，也就是本教程第一步中开始的标题之前。这将在一个圆内创建一个看上去像汉堡????的菜单图标。<nav class=“menu”> <input type=“checkbox” href=”#" class= “menu-open” name=“menu-open” id=“menu- open” /> <label class=“menu-open-button” for=“menu-open”> <span class=“hamburger hamburger-1”></span> <span class=“hamburger hamburger-2”></span> <span class=“hamburger hamburger-3”></span> </label>14. 完成导航现在添加其余的导航元素。我们使用 Font Awesome 开源图标库，该库已被添加到 head 部分，以便使用该库的CDN链接。每个菜单圆形元素都有一个图标。<a href="#" class=“menu-item”> <i class=“fa fa-car”></i> </a> <a href="#" class=“menu-item”> <i class=“fa fa-ship”></i> </a> <a href="#" class=“menu-item”> <i class=“fa fa-map”></i> </a> <a href="#" class=“menu-item”> <i class=“fa fa-suitcase”></i> </a> </nav>15. 添加新过滤器接着为这个效果添加另一个过滤器。在SVG中，在先前添加的过滤器标记代码的后面添加以下代码。这里的效果用和前面非常相似的方式建立起来。这将使菜单看起来像粘稠的液体一样分开。<filter id=“shadowed-blob”> <feGaussianBlur in=“SourceGraphic” result=“blur” stdDeviation=“20” /> <feColorMatrix in=“blur” mode= “matrix” values=“1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7” result=“blob” /> <feGaussianBlur in=“blob” stdDeviation=“3” result=“shadow” /> <feColorMatrix in=“shadow” mode= “matrix” values=“0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2” result=“shadow” />16. 完成过滤器此处添加了过滤器的剩余部分，这将完成菜单项上的效果。并添加液体斑点效果。添加完代码后保存文件，然后切换到 ‘design.css’ 文件。<feOffset in=“shadow” dx=“0” dy=“2” result=“shadow” /> <feComposite in2=“shadow” in=“blob” result=“blob” /> <feComposite in2=“blob” in=“SourceGraphic” result=“mix” /> </filter>17.应用过滤器CSS 代码也可以添加到其它文件中，但是为了将所有导航 CSS 放在同一个地方，我们还是把下面的代码写到 design.css 中。这里的过滤器会被用于菜单，这是一个固定的菜单，会始终显示在屏幕上。.menu { filter: url(“#shadowed-blob"); position: fixed; padding-top: 20px; padding-left: 80px; width: 650px; height: 150px; box-sizing: border-box; font-size: 20px; text-align: left;}18. 使菜单工作当菜单打开时，菜单图标被设置为不可见。然后创建每个菜单项的悬停元素，以便当用户将鼠标悬停在上面时进行更改。当菜单项返回其原始位置时，菜单的每个子项都会有 0.4 秒的变换时间。.menu-open { display: none;}.menu-item:hover { background: #47959f; color: #b2f0f8;}.menu-item:nth-child(3), .menu-item:nth-child(4), .menu-item:nth-child(5), .menu-item:nth-child(6) { transition-duration: 400ms;}19. 添加菜单图标更改菜单图标的 z-index 以将其置于顶部通过更改其 z-index，菜单图标高于其他元素。当用户将鼠标悬停在菜单上时，菜单会滑出，单击菜单后其上的三条横线会变为 “X”，表示收起菜单。.menu-open-button { z-index: 2; transition-timing-function: cubic- bezier(0.175, 0.885, 0.32, 1.275); transition-duration: 400ms; transform: scale(1.1, 1.1) translate3d (0, 0, 0); cursor: pointer;}.menu-open-button:hover { transform: scale(1.2, 1.2) translate3d (0, 0, 0);}20.移动元素第一个菜单项实际上是菜单的第三个子项，因为它前面还有一个复选框和汉堡包样式的图标。添加这一项可使第一个菜单元素在用户单击菜单后移动到位。每个菜单元素都会以稍长的时间移出。.menu-open:checked + .menu-open-button { transition-timing-function: linear; transition-duration: 400ms; transform: scale(0.8, 0.8) translate3d (0, 0, 0);}.menu-open:checked ~ .menu-item { transition-timing-function: cubic- bezier(0.165, 0.84, 0.44, 1);}.menu-open:checked ~ .menu-item:nth-child(3) { transition-duration: 390ms; transform: translate3d(110px, 0, 0);}21.解决剩下的动作以不同的速度移动菜单元素以获得更加流畅的效果剩余的菜单元素以不同的速度移出来。这使得菜单元素能够在动画的早期阶段粘在一起，在这里用了 SVG 滤镜提供的斑点液体外观。添加下列代码后保存文件并在浏览器中查看完成的结果。.menu-open:checked ~ .menu-item:nth-child(4) { transition-duration: 490ms; transform: translate3d(220px, 0, 0);}.menu-open:checked ~ .menu-item:nth-child(5) { transition-duration: 590ms; transform: translate3d(330px, 0, 0);}.menu-open:checked ~ .menu-item:nth-child(6) { transition-duration: 690ms; transform: translate3d(440px, 0, 0);}本文首发微信公众号：jingchengyideng欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章欢迎继续阅读本专栏其它高赞文章：12个令人惊叹的CSS实验项目世界顶级公司的前端面试都问些什么CSS Flexbox 可视化手册过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！从设计者的角度看 ReactCSS粘性定位是怎样工作的一步步教你用HTML5 SVG实现动画效果程序员30岁前月薪达不到30K，该何去何从7个开放式的前端面试题React 教程：快速上手指南 ...

原文链接为了之后产品可能的动画需求，我们需要调研各种可行的前端动画技术。相信CSS3动画和JS动画我们平常已经接触很多了，而SVG技术则很少用，事实上SVG也是一种强大的动画解决方案，可以帮我们解决传统动画做不到的技术痛点。SVG简介SVG(Scalable Vector Graphics)，可缩放矢量图形，具有放大缩小不失真的特性，可以用来创建矢量图。SVG1.1 于 2003 年 1 月 14 日成为 W3C 推荐标准。SVG本质上是用XML语言描述的，所以它可以和DOM结构一样被CSS和JS编程控制，通过连续地改变SVG图形属性就可以创建SVG动画。SVG可用文本编辑器编辑，也可通过Adobe Illustator等专业编辑软件处理。SVG文件可单独使用，使用XML定义并包含DTD声明：<?xml version=“1.0” standalone=“no”?><!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns=“http://www.w3.org/2000/svg" version=“1.1”> <circle cx=“100” cy=“50” r=“40” stroke=“black” stroke-width=“2” fill=“red” /></svg>在现代浏览器中，我们可以直接在HTML代码中嵌入SVG代码：<div class=“svg-wrap”> <svg xmlns=“http://www.w3.org/2000/svg" version=“1.1”> <circle cx=“100” cy=“50” r=“40” stroke=“black” stroke-width=“2” fill=“red” /> </svg></div>SVG pathSVG可以绘制许多形状，这里不一一介绍，重点介绍下svg path，它是svg形状中功能最为强大的一个，也是我们前端动画会经常用到的形状。顾名思义，path定义的是一组路径，你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。path元素的形状是通过它的 d 属性决定的，d属性中通常以字母为命令，如下所示：M = movetoL = linetoH = horizontal linetoV = vertical linetoC = curvetoS = smooth curvetoQ = quadratic Bézier curveT = smooth quadratic Bézier curvetoA = elliptical ArcZ = closepath以下path 定义了一个三角形：它开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。<svg xmlns=“http://www.w3.org/2000/svg" version=“1.1”> <path d=“M150 0 L75 200 L225 200 Z” /></svg>注意：绘制复杂的path路径应尽可能借助设计工具，人为计算path的d属性耗时耗力，也不是目前的学习重点。path的其他常用属性有：stroke 定义路径颜色stroke-width 定义路径宽度，单位像素stroke-dasharray 用于创建虚线fill 定义path闭合区域的填充颜色基于svg path实现图片路径动画点击这里查看demo：WPS Logo Demo这个效果的实现并不复杂，首先我们需要wps logo的svg资源，可以借助photoshop 和 Adobe Illustrator 从图片中生成svg路径。第一步，使用ps魔棒工具去除白色背景，并选中路径，然后右键，建立工作路径：点击菜单-> 文件 -> 导出 -> 导出路径到ai ：在ai中选中路径，存储为svg格式。然后在编辑器中打开svg即可查看到path的d属性了！之后，在代码里创建svg图形，并指定其stroke-width等属性。动画方面，使用css animation控制path的stroke-dasharray属性来实现动画，这个属性可以将path绘制为虚线。如 stroke-dasharray: 10px 20px; 就定义了实线的长度是10px，空白的长度是20px，如下图所示：利用这个原理，我们将实线的长度从0逐渐变为path总长度，将空白的长度逐渐变为0，就可以实现类似“绘图”的效果了~#wps-logo-path { animation: wpsLogo 3s ease-in-out forwards;}@keyframes wpsLogo { 0% { stroke-dasharray: 0 1078px; } 100% { stroke-dasharray: 1078px 0; }}path的总长度可以这样计算 $(’#wpsLogoPath’)[0].getTotalLength()动画过程中，可以设置监听，在动画的不同阶段执行不同的钩子函数：document.addEventListener(‘webkitAnimationEnd’, function(e) {}代码中，我们还定义了线性渐变，用来填充path闭合区域内的背景值，fill: url(#wpslinear)<defs> <linearGradient id=“wpslinear” x1=“0%” y1=“0%” x2=“0%” y2=“100%"> <stop offset=“0%” stop-color="#FB5A43”/> <stop offset=“100%” stop-color="#FD3258”/> </linearGradient></defs>到这一步，svg path动画的demo就基本做完了，我们可利用这个原理实现更复杂的svg path动画，如多个path的过渡动画，物体沿不规则path移动等等。svg技术本身还是很复杂的，短时间掌握svg有一定的难度，必要时可以借助svg动画库实现需要的设计效果，做到技术灵活服务于产品。 ...

1、 svg知识扫盲svg简介SVG(Scalable Vector Graphics)，可缩放矢量图形，具有放大缩小不失真的特性，可以用来创建矢量图。SVG1.1 于 2003 年 1 月 14 日成为 W3C 推荐标准。SVG本质上是用XML语言描述的，所以它可以和DOM结构一样被CSS和JS编程控制，通过连续地改变SVG图形属性就可以创建SVG动画。SVG可用文本编辑器编辑，也可通过Adobe Illustator等专业编辑软件处理。SVG文件可单独使用，使用XML定义并包含DTD声明：<?xml version=“1.0” standalone=“no”?><!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns=“http://www.w3.org/2000/svg" version=“1.1”> <circle cx=“100” cy=“50” r=“40” stroke=“black” stroke-width=“2” fill=“red” /></svg>在现代浏览器中，我们可以直接在HTML代码中嵌入SVG代码：<div class=“svg-wrap”> <svg xmlns=“http://www.w3.org/2000/svg" version=“1.1”> <circle cx=“100” cy=“50” r=“40” stroke=“black” stroke-width=“2” fill=“red” /> </svg></div><svg>元素即<svg>标签，svg有三个视图相关的属性：viewport 即用x, y, width, height定义的页面矩形区域viewbox 定义用户视野的位置和大小，如 viewBox =‘20 20 100 100’ 定义了起始坐标为(20, 20)，宽高为100的矩形区域，演示地址preserveAspectRatio 保持横纵比，当viewport和viewbox 长宽比不一致时，该属性可以控制2者的对齐和裁剪情况，演示地址用法<align> [<meet or slice>]align: xMid xMin xMax 和 YMid YMin YMax 自由组合 e.g. preserveAspectRatio = “xMidYMid meet"基本图形元素svg绘制基本图形元素，只要明确好各个参数的含义，应该很简单，老铁们快速过一遍：矩形，rx，ry定义圆角<rect x=“10” y=“10” width=“100” height=“100” rx=“5” ry=“5” fill=“yellow”></rect>圆 cx cy 定义圆心<circle cx=“50” cy=“50” r=“40” fill=“yellow”></circle>椭圆 rx ry 定义长轴半径、短轴半径<ellipse cx=“50” cy=“50” rx=“40” ry=“20” fill=“yellow”></ellipse>线段<line x1=“10” y1=“10” x2=“90” y2=“90” stroke=“yellow”></line>折线 点与点之间用空格隔开<polyline points=“50,10 80,90 10,30 90,30 20,90” stroke="#fb3” fill=“transparent”></polyline>多边形<polygon points=“50,10 80,90 10,30 90,30 20,90” stroke="#fb3” fill=“transparent”></polygon>路径，可以绘制上述所有图形 d属性定义路径的具体形式<path d=“M10,10 C40,5 40,140 100,100” stroke="#fb3” stroke-width=“4px”></path>文字 dx dy是相对起点坐标的偏移量，rotate指定单个文字的旋转<text x=“10” y=“10” dx=“10” dy=“10” textLength=“100” rotate=“20”>示例文字</text>其他常用标签元素主要有<g> <defs> <symbol> <use> <clipPath> <linearGradient> 等可以参考这个 codepen 演示 来理解。2、svg动画why svg？如果你问我为什么用svg做动画，而不是其他技术，那可以告诉你以下几点：svg本质上是一种图形绘制技术，广泛用于web矢量图绘制，适用于多数商业logo，卡通图片制作。因此高清屏幕使用svg可避免模糊现象。（与此相关，canvas则是用来绘制点阵图（或者说位图），两者是相对的）基于不规则path的动画效果，如路径描边（path draw），路径变体（path morph），沿路径运动（path move）等，这是目前其他技术不太容易处理的。除了path，svg也支持渐变、裁切、遮罩等特性，在其他技术遇到瓶颈时，不妨考虑svg。这里是一个用到大量svg技术的网站 welikesmall，可以参考里面的效果实现。轻量，且兼容性好。svg于2003年已成为web标准，通常几十行svg代码就可解决特定的需求。svg在未来也有着可观的发展前景。SVG + SMIL 实现动画SMIL 动画 Demo基于SMIL标准，可以直接借助svg animate标签实现动画。目前SMIL动画多数都可以用css3来代替，但要让某个物体沿着特定路径移动，css3就无能为力了（除了chrome46新增的motion-path）。遗憾的是，SMIL标准正逐渐衰落，并不会成为未来世界的主流，它正逐渐被css3所代替，所以我们只需简单了解svg中的SMIL特性即可。<set>set 元素可以在特定时间后，瞬间修改图形元素的某个属性值，它不是动画，是一种突变。<animate>animate元素定义在图形元素里面，它可以改变图形某一个属性的值，需要指定起始值和结束值（from to）以及持续时间（dur）<animateMotion>animateMotion它可以引用一个事先定义好的动画路径，用<mpath>元素引用，让图形按路径定义的方式运动。<animateTransform>类似于css transform，它可以改变图形的transform属性，e.g. rotate | translate | scale | skewX | skewYsvg + css3 或 svg + js 实现动画snap.svg 动画 Demo通过css或js修改svg图形的属性也可实现动画，这种方式也是目前最常用的。这就涉及到其他的知识点了，css3的transform，transition，animation等，js的setInterval和requestAnimationFrame。除了用原生代码控制，我们当然也可以用业界已经成熟的动画库来操作属性：anime.js （15kb左右，github 20k star, 最轻量，推荐使用）velocity.js (50kb左右，不依赖jq，号称比css动画快)snap.svg.js (svg中的jQuery，专业操作svg，80kb左右)GreenSock (100kb左右，动画功能齐全，部分插件收费)// animejs api var animation= anime({ targets: ‘#svg-path’, // 目标元素，支持css选择器，dom，dom数组等 opacity: ‘0’, 要变化的属性，这里是opacity属性，可以是任何css或svg属性 duration: 3000, delay: 1000, easing: ’easeInOutQuart’, loop: true, direction: ‘reverse’, // 动画方向：逆向播放 complete: function(anim) { }});常见的图形属性如下所示：fill 定义填充颜色fill-opacity 定义填充透明度stroke 边框颜色stroke-widthstroke-opacitystroke-linecap 单条线端点样式 butt | round | squarestroke-dasharray 定义虚线样式，间隔定义实线和空白的长度，如 10 5 5 10stroke-dashoffset 设置虚线描边偏移量，使图案向前移动opacityfont-size | font-weight | font-family | font-style | text-decoration 同CSStransform | transform-origin 同CSSrotate svg独有，定义 单个文字 的旋转角d 路径的描述属性3、相关工具网站由于svg技术过于强大，此文章只是抛砖引玉，更多精髓等待大家发掘：method draw | 在线制作svg图片svgo | 强大的svg压缩工具svg trick | 一个研究svg技术的网站vivus | 制作svg路径动画的js库snap.svg.js | svg中的jquerysnap.svg中文文档鑫空间，鑫生活 | 博主对svg和css研究很深 ...

svg中的有path选择器来定义路径。path选择器里属性有：d属性用来定义路径数据stroke：描边颜色stroke-width:描边宽度fill：填充颜色stroke-dasharray:间隔多少像素绘制一次stroke-dashoffset:每次绘制偏离多少，必须配合stroke-dasharray使用d属性参数有：M = moveto(M X,Y) ：将画笔移动到指定的坐标位置L = lineto(L X,Y) ：画直线到指定的坐标位置H = horizontal lineto(H X)：画水平线到指定的X坐标位置V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置 C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线 S = smooth curveto(S X2,Y2,ENDX,ENDY)：平滑曲率Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线 T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)： 椭圆弧Z = closepath()：关闭路径根据项目主要学习的是a或者A来记录elliptical Arc椭圆弧的记录如下：指令：A (绝对) a (相对)椭圆弧的参数形式：(rx ry x-axis-rotation large-arc-flag sweep-flag x y)详解参数：rx ry 是椭圆的两个半轴的长度。x-axis-rotation 是椭圆相对于坐标系的旋转角度，角度数而非弧度数。large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。x y 是圆弧终点的坐标。<div style=“width:150px;height:150px;"> <svg viewBox=“0 0 100 100”> <path d=“M 50 50 m 0 -45 a 45 45 0 1 1 0 90” stroke-width=“9.8” stroke="#20a0ff” fill=“none” stroke-linecap=“round” /> <path d=“M 50 50 m 0 45 a 45 45 0 1 1 0 -90” stroke-width=“9.8” stroke="#20a0ff" fill=“none” stroke-linecap=“round” /> </svg></div>感谢这些博主的知识支持：https://blog.csdn.net/cuixipi…https://segmentfault.com/a/11… ...

职业篇博客之前博客系统一直用的 Ghost，然而 Ghost 的新版在vps上升级迁移遇到很多问题，后来索性自己用 nodejs 写了一个，基于 nextjs。翻译文章花了一周的闲余时间，翻译了 maintainable css，访问地址 http://maintainablecss.wtser.com/真的是好久没翻译文章了。生产力在项目中使用了 stylelint ，peritter 等工具，统一代码风格，提高代码质量。iterm2 插件https://xiaozhou.net/learn-the-command-line-iterm-and-zsh-2017-06-23.htmlaliasalias gs=“git status"alias gitclean=“git branch -vv | grep ’ gone]’ | awk ‘{print $1}’ | xargs git branch -d"快速跳转使用 d 这个命令，列出最近访问过的各个目录目录名简写与补全比如我们要进入到 ~/workspace/src/dict，我们只需要输入每个目录的首字母就行，然后再TAB键补全重复上一条命令输入 r ，可以很便捷的重复执行上一条命令。zsh-autosuggestionshttps://github.com/zsh-users/zsh-syntax-highlightinghttps://github.com/zsh-users/zsh-autosuggestions了解了一些 tmux 相关的知识点，但是缺少实践。http://harttle.com/2015/11/06…http://kumu-linux.github.io/b...http://cenalulu.github.io/lin...http://wdxtub.com/2016/03/30/...Tmux使用手册研究与学习算法学习经典排序算法总结与实现JS家的排序算法业务相关给自己取了一个英文名 English name Finn参与公司的一个SPA项目，react，学习了 redux state 相关的知识。SVG use with External Source<svg viewBox=“0 0 100 100”> <use xlink:href=“defs.svg#icon-1”></use></svg>https://css-tricks.com/svg-use-external-source/But, the external resource way doesn’t work in any version (up to 11 tested) of Internet Explorer. Even the ones that do support inline SVG: 9, 10, 11.https://github.com/jonathantneal/svg4everybodyIt works like this:If the browser is IE 9, 10, or 11 (User Agent sniff, but that’s the whole point here).Ajax for the SVG file referencedFind the needed bit, based on the ID referenced (e.g. #icon-1)Inject that into the <svg> on the page简单的跑马灯使用 picture 元素实现 图片的 responsesrcset only use for mobile imghttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture<picture> <source srcset=“mdn-logo-wide.png” media="(min-width: 600px)"> <img src=“mdn-logo-narrow.png” alt=“MDN”></picture>overscroll-behavior 解决 modal 滚动带动底下页面滚动问题比较拙的解决方案就是给body添加overflow:hidden，但这有可能会影响我们的操作，甚至影响你浏览你的页面。CSS的overscroll-behavior，这个属性有三个可取值：auto：其默认值。元素（容器）的滚动会传播给其祖先元素。有点类似JavaScript中的冒泡行为一样contain：阻止滚动链接。滚动行为不会传播给其祖先元素，但会影响节点内的局部显示。例如，Android上的光辉效果或iOS上的回弹效果。当用户触摸滚动边界时会通知用户。注意，overscroll-behavior:contain在html元素上使用，可以阻止导航滚动操作none：和contain一样，但它也可以防止节点本身的滚动效果> overscroll-behavior属性是overscroll-behavior-x和overscroll-behavior-y的简写，如果你只想控制其中一个方向的滚动行为，可以使用其中的某一个属性。编写自定义视频播放器https://www.w3.org/2010/05/video/mediaevents.htmlfullscreen apihttps://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_APIhttps://github.com/sindresorhus/screenfull.jsbug in safarielement:fullscreen{}针对被全屏的元素 (如果element是iframe，:-webkit-full-screen-ancestor:not(iframe) {} 在safari 不生效)safari iframe webkitIsFullScreen aways return falseevent webkitfullscreenchange e.target return document when exit fullscreen娱乐篇电影电视剧大佛普拉斯有话好好说 Keep Cool 1997燃烧底特律 我欲成人末代皇帝红海行动西部世界 S2诚邀辣妹：网络性与爱西游记女儿国this is us s2雌猫们奇迹男孩斯大林之死挚爱梵高异形：契约逃出绝命镇小丑回魂恐惧支配校合唱团的秘密短暂的婚姻去他妈的世界熔炉黑镜 第四季This is us season2移动迷宫2红高粱移动迷宫3逃离与神通行雷神3三块广告牌神秘巨星奇门遁甲大世界好极了中邪请以你的名字呼唤我相亲相爱唐人街探案2废城记电锯惊魂1-7江湖儿女美人计反贪风暴3爆裂无声升级动物世界沙海李银河的52堂性学课逃避可耻但有用血观音毒液特工李茶的姑妈影人生一串游戏青蛙旅行Getting Over It中国式父母阅读篇解忧杂货店What if二十世纪的教训根据我的看法，选举应该是这么回事：我们不是让新政府合法化，而是评判旧政府的表现如何——投票日那天是旧政府缴成绩单的时间。原子弹设计重来2人们的工作方式从“同步”协作变成了无须同步的协作。分布式员工团队（distributed workforce）最适合远程办公的脑力工作，比如写作、编程、设计、客户支持（先列举这几样），跟残酷的利润大战都没什么关系（制造业就属于这种）。我们发现，判断工作质量的最好方法，就是在正式雇用员工、给他们分配许多工作之前，先让他们试做一点。想要在工作中不被人忽略，有两种最基本的方法。第一个就是吵吵闹闹，弄出点动静来。第二个就是在工作中取得进展，交出漂亮作品。幸运的是，对于远程员工来说，工作质量最重要。学习之道活着自卑与超越侧重讲述婴幼儿时期父母教育对孩子的影响Your past experiences are blinding you你的经验会束缚你为啥会有 『偏见与歧视』只有放下执着才能去实现任何事情。It’s only after we’ve lost everything that we’re free to do anything.即便是那些大师级的人也无法找到最好的方式来取胜，因为他们擅长的地方束缚了他们的思想。Even these masters couldn’t see the best way to win because the one they knew so well colonised their mind.人们很难脱离自己的舒适区。处于对未知的恐惧，他们倾向于呆在自己熟悉的地方。People have a hard time letting go of their suffering. Out of a fear of the unknown, they prefer suffering that is familiar”如何摆脱偏见再次成为一个初学者Be a beginner again初学者的思想充满了许多的可能性，但是专家就少了许多In the beginner’s mind there are many possibilities, but in the expert’s there are few”初学者思想不是说要反对经验，而是在我们用经验应对新状况时应保持的一种开放的思想。Beginner’s Mind doesn’t mean negating experience; it means keeping an open mind on how to apply our experience to each new circumstance.未完待续… ...

前言最近正在学习数据可视化, 这里记录一下一些心得与成果, 采用的技术是 (svg + react + d3)。 这种实现可视化方式本人个人感觉超级不错，如果你是有一定的基础的同学，强烈推荐一下。效果整体效果如下：这个是普通的速度仪表盘，有没有开发太多的动态交互，唯一的交互是点击图片最上面的加速与减速就能够调整速度了。开发思路搭建开发环境使用create-react-app创建一个新的项目，添加依赖d3yarn add d3初始化数据这里速度范围是[0, 200], 对应角度范围个人设置是[150, 390], 很明显这是一个线性比例尺。速度间隔是2。代码如下const scale = d3.scaleLinear().domain([0, 200]).range([150, 360 + 30])const ticks = scale.ticks(100) // 200 / 2 => 100 构建外部圈 function Chart(props) { const { width, height, margin } = props return ( <svg width={width} height={height}> <g transform={translate(${margin.left}, ${margin.top})}> { props.children } </g> </svg> )}……export default class Meter extends Component { … render () { // config => {width: xxx, height: xxx, margin: xxx} return ( <div className={‘container’}> <Chart {…config}> <g> <circle cx={0} cy={0} r={204} fill={‘rgba(158, 158, 158, .4)’}></circle> <circle cx={0} cy={0} r={196} fill={’#FFF’}></circle> <circle cx={0} cy={0} r={200} fill={’transparent’} stroke={’#000’}></circle> </g> </Chart> </div> ) }}上面其实是绘画了三个圆， 利用SVG后面的绘制的图画，会覆盖前面的图画的特性。先画最外面，然后最里面，最后中间的圆。 就把最外层的圈给描绘出来了，效果如下：描绘刻度尺接着上面的代码结构，我们开始刻画刻度尺 ……export default class Meter extends Component { … render () { // config => {width: xxx, height: xxx, margin: xxx} return ( <div className={‘container’}> <Chart {…config}> <g> <circle cx={0} cy={0} r={204} fill={‘rgba(158, 158, 158, .4)’}></circle> <circle cx={0} cy={0} r={196} fill={’#FFF’}></circle> <circle cx={0} cy={0} r={200} fill={’transparent’} stroke={’#000’}></circle> </g> <g fill={’transport’} stroke={’#000000’}> { ticks.map((tick) => { let IS_20_TIME = tick % 20 === 0 let title = IS_20_TIME ? <text x={160} dominantBaseline={‘middle’} textAnchor={’end’}>{tick}</text> : ’’ return ( <g transform={rotate(${scale(tick)})} key={tick}> <path d={M165, 0L185,0} strokeWidth={IS_20_TIME ? 3 : 1}></path> {title} </g> ) }) } </g> </Chart> </div> ) }}这里刻画刻度尺，我的思路很简单，刻度尺是对速度大小的描述，而速度跟角度又是线性相关，反过来，速度对应角度。所以，我只是需要根据速度所对应的角度，而对水平刻度进行旋转即可。效果大家可以看到：指向针指向针其实就是一个圆 + 三角形的组合，代码如下： <circle cx={0} cy={0} r={10} fill={’#’}></circle> <path d={M-20, 5L-20, -5L130, 0Z} transform={rotate(150)}> <animateTransform ></animateTransform> </path>上面本人实现的比较粗糙，大家可以把这个封装成一个shape, 以后可以直接复用的，后面如果需要旋转，可以通过<g>元素来实现。 到这一步，一个简单的仪表盘就初具原型了控制指针转动指针的转动是根据速度来的，所以我们需要先定义一个speed的状态。constructor(props) { super(props) this.state = { speed: 0 } }接下来，我们需要把speed映射到指针上面。怎么处理呢还记得前面定义的scale，这个是一个线性比例尺，通过它我们能够获取不同速度对应的角度我们把上面的指向针代码进行改造const {speed} = this.state……<circle cx={0} cy={0} r={10} fill={’#’}></circle><path d={M-20, 5L-20, -5L130, 0Z} transform={rotate(${scale(speed)})}> <animateTransform ></animateTransform></path>这样我们设置不同的speed就能在页面控制指针指向不同的刻度尺。速度标识区间所谓的速度标识区间，其实就是几段圆弧，通过不同的颜色来告知进入不同的速度区间。这里我对圆弧进行了封装，底层通过d3的arc方法来创建圆弧。function LArc(props) { const { start, end, color } = props let _arc = d3.arc()({ innerRadius: 165, outerRadius: 185, startAngle: Math.PI * 2 * (scale(start) + 90) / 360, endAngle: Math.PI * 2 * (scale(end) + 90) / 360 }) return ( <path d={_arc} fill={color}></path> )}这里其实还有一个问题，就是需要先加载速度标识区间，然后再去添加刻度尺，不然标识区间会覆盖刻度尺(切记)。这样一个基本速度仪表盘就出来了如果你能明白上面的实现思路，我觉得你可以自己实现一个时钟了如果你想了解更多：比如指示器如何实现的请参考https://github.com/cookhot/i-… (本人会在里面不定期增加新图表哦) ...

最近在做首页动画的时候，引入有背景色的mp4动图时，动图的背景色不能很好的融入相同背景色的不同浏览器和不同显示器，出现了下图这种尴尬的情况：动图的边界始终有根分界线，即使调整了背景色适应这个边界，也总是会在不同的显示器中显示出不同程度的分界线。于是我决定用代码实现整个动图。制作这样一套动图，只靠前端攻城狮是有点费劲的，毕竟需要很多线图的绘制，没有专业的UI支持很难设计出标准漂亮的动图。拿我这次做的动图来说整体由css操作png和svg搭建流转路线构成首先需要UI同学把整体布局，距离、素材规划出来然后就是根据整体布局和距离把素材扑上去最最重要的是svg绘制的流动线路1.svg path这种线路图，UI同学一般绘制完都是向下面这样的：<path class=“st0” d=“M208,224.6c-0.5,0-1-0.1-1.5-0.4c-0.9-0.5-1.5-1.5-1.5-2.6l-0.6-36.3c0-0.6,0.4-1,1-1c0,0,0,0,0,0 c0.5,0,1,0.4,1,1l0.6,36.3c0,0.5,0.4,0.8,0.5,0.9c0.2,0.1,0.6,0.2,1,0l67.5-40.3c0.4-0.3,0.5-0.7,0.5-0.9c0-0.2,0-0.6-0.5-0.9 l-82.9-49.8c-0.9-0.5-1.5-1.5-1.5-2.6c0-1.1,0.6-2,1.5-2.6l98.5-58.6c0.4-0.3,0.5-0.7,0.5-0.9c0-0.2-0.1-0.6-0.5-0.9l-50-29.2 c-0.9-0.5-1.5-1.5-1.5-2.5c0-1,0.5-2,1.4-2.6l9.4-6c0.5-0.3,1.1-0.2,1.4,0.3s0.2,1.1-0.3,1.4l-9.4,6c-0.4,0.3-0.5,0.7-0.5,0.9 s0.1,0.6,0.5,0.8l50,29.2c0.9,0.5,1.5,1.5,1.5,2.6c0,1.1-0.5,2-1.5,2.6l-98.5,58.6c-0.4,0.3-0.5,0.7-0.5,0.9c0,0.2,0,0.6,0.5,0.9 l82.9,49.8c0.9,0.5,1.5,1.5,1.5,2.6c0,1.1-0.5,2-1.5,2.6l-67.5,40.3C209.1,224.5,208.5,224.6,208,224.6z”/><path class=“st0” d=“M324.9,158.7c-0.2,0-0.4,0-0.5-0.1l-64.2-39.3c-0.9-0.5-1.4-1.5-1.4-2.6c0-1.1,0.5-2,1.5-2.6l99-59.4 c0.4-0.3,0.5-0.7,0.5-0.9s0-0.6-0.5-0.9l-71.3-42.7c-0.5-0.3-0.6-0.9-0.3-1.4s0.9-0.6,1.4-0.3l71.3,42.7c0.9,0.5,1.5,1.5,1.5,2.6 s-0.5,2-1.5,2.6l-99,59.4c-0.4,0.3-0.5,0.7-0.5,0.9c0,0.2,0,0.6,0.5,0.9l64.2,39.3c0.5,0.3,0.6,0.9,0.3,1.4 C325.6,158.6,325.2,158.7,324.9,158.7z”/>总之就是很长很乱的一段。。。这是因为AI绘制svg的时候每一条线都是由两条线和一些弯曲的规则（贝塞尔曲线）组成。建议直接用UI同学给的svg编辑器打开后直接引用，因为”贝塞尔曲线“真的不是随便就能Hold住的。。。下面附上svg path指令对比上面的代码可以看出路径d由M作为路径起始坐标点开始由z结束这段闭合曲线。直线由L或者l绘制，分别代表绝对路径和相对路径曲线由贝塞尔曲线规则绘制C(C x1, y1, x2, y2, x,y )为了更方便展现出贝塞尔的奥义，举下图说明：然鹅，真正使用指令徒手敲代码画图的时候才真正发现，这就是个坑啊。。。毕竟我们还要测量距离、像素，找起点、终点，最头疼的是还要用贝塞尔绘制折线曲率。。。有这时间还不如去学学UI了????当然，无权阻止大神们的探索。。。所以踩了这些坑的我还是直接用了UI绘制好的svg绘制直接上path<svg> <path /><svg>首先这样肯定是可以绘制出线的，但是我们的目的不光是要画出线，还要在线上加动画效果动画我是用一小段渐变色的流动来表示数据的流动，所以首先需要给线段–渐变色在SVG中，有两种主要的渐变类型：线性渐变（LinearGradient）放射性渐变|径向渐变（RadialGradient）区别在于：使用径向渐变可以定义渐变中心原点的坐标，半径，更方便加在线上。直接上代码：<radialGradient cx=“194.1” cy=“128.9” r=“20” gradientUnits=“userSpaceOnUse” id=“linearGradientCordPath1”> <stop stop-color="#ffff00" offset=“0%"></stop> <stop stop-color="#ffff00” offset=“25%"></stop> <stop stop-color="#22A1FF” offset=“100%"></stop></radialGradient>渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。大致效果如下：然后我们需要让这段渐变的颜色动起来<animation><animate attributeName=“cx” values=“252.3;242.6;292.6;194.1;277;205;205.4;” dur=“3s” calcMode=“linear” repeatCount=“indefinite”></animate><animate attributeName=“cy” values=“25;34.1;68.5;128.9;183.9;221.6;184.3;” dur=“3s” calcMode=“linear” repeatCount=“indefinite”></animate>attributeName要变化的元素属性名称分别为x轴和y轴方向，values是每一个经过的关键值坐标点，可以直接用Adobe AI打开svg在线上直接拿到关键点的坐标分别写入cx,cy的value中，调整dur时间，加上indefinite循环：

翻译：疯狂的技术宅原文：http://jakearchibald.com/2017…本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章渲染SVG图像可能会非常慢在转换 SVG 图像时，浏览器会试着在每一帧上进行渲染，以便使图像尽可能的清晰。 不幸的是，SVG渲染可能会很慢，特别是对于较大的图像。这里是一个DEMO，打开后点击“Scale SVG”查看效果。图：使用 Devtools 查看SVG动画的时间线这是一个非常复杂的SVG，在某些帧上消耗的时间是我们帧预算的10倍，所以这个动画看起来非常糟糕。 这是在一款功能强大的MacBook上做的测试。如果是更简单的SVG，就不那么糟了。 这是用Firefox的logo演示的另一个例子，看起来效果还可以。不过新API为我们提供了更多的控制方法：SVG栅格化的惰性处理createImageBitmap(imgElement).then(imageBitmap => { // … }); createImageBitmap可以将许多不同的图像栅格化为位图数据，这些数据可以绘制到canvas元素上。 但是，在Chrome 61+中，启用了chrome://flags/#enable-experimental-canvas-features，它可以为 SVG 图像启用HTML图像元素，并在主线程之外进行异步的栅格化处理，所以不会破坏动画。另外你还可以只渲染SVG的一部分，并以特定大小进行输出：createImageBitmap( imgElement, sourceCropX, sourceCropY, sourceCropWidth, sourceCropHeight, {resizeWidth, resizeHeight} ).then(imageBitmap => …); 这允许我们非常方便的使用画布对SVG进行位图缩放，同时渲染被裁剪后且非常清晰的版本。 一旦清晰版准备就绪，就可以将其包含在动画中。这里是一个DEMO，按“Scale canvas”查看效果。 需要Chrome 61+ 中查看，并启用 chrome://flags/#enable-experimental-canvas-features 。图：Devtools中画布动画的时间线使用这种方法对CPU来说更加友好，动画也很流畅：查看SVG动画与SVG-in-canvas两种效果比较的视频演示：https://youtu.be/-yQBbWlXuqg对于复杂的汽车SVG图像，最后才会出现清晰的图像。 使用Firefox徽标时，清晰版出现得更早，因为渲染时间更短。DEMO的所有代码：https://glitch.com/edit/#!/sv…:1:0平滑光栅化从上面的时间线可以看出，Chrome在将更清晰的纹理传到GPU时仍然会跳过一帧。 这个问题可以通过将工作分块为更小的块来解决，因此GPU上传不会破坏帧预算。OpenSeadragon：可以动态加载图像切片，并创建可缩放图像。 它非常适合从网络中获取位图数据，但有点hack。Zoomable lazy-rendered tiled SVG： 需要Chrome 61+并启用 chrome://flags/#enable-experimental-canvas-features 。是的，边缘有一点粗糙。 就像我前面说的那样，这是一个hack。 不过我真的对此很兴奋，对 SVG 图像更加酷炫的处理技术在逐渐用于web。本文首发微信公众号：jingchengyideng欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

翻译：疯狂的技术宅原文：https://www.smashingmagazine….本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章摘要在这篇文章中你将了解Awwwards网是怎样实现动画的。 本文介绍了HTML5 SVG中的circle 元素，它的stroke属性，以及如何使用CSS变量以及用 Vanilla JavaScript 为它们设置动画。SVG是一种基于XML的，用于定义缩放矢量图形的标记语言。 它允许你通过在2D平面中确定的一组点来绘制路径、曲线和形状。 此外你还可以通过在这些路径上添加动态属性（例如笔触，颜色，粗细，填充等）来生成动画。从2017年4月起，CSS Level 3 填充和描边模块开始支持从外部样式表设置SVG颜色和填充图案，而不是在每个元素上设置属性。 在本教程中，我们将会使用简单的纯十六进制颜色，不过填充和描边属性也支持图案，渐变和图像作为值。注意：访问Awwwards网站时，你需要把浏览器宽度设置为1024px或更高的才能更好的查看动画显示。演示链接源代码文件结构让我们从在终端中创建文件开始：???? mkdir note-display???? cd note-display???? touch index.html styles.css scripts.jsHTML这是连接css和js文件的初始模板：<html lang=“en”><head> <meta charset=“UTF-8”> <title>Note Display</title> <link rel=“stylesheet” href="./styles.css"></head><body> <script src="./scripts.js"></script></body></html>每个note元素都包含一个列表项：li用于保存circle，note值及其label。图：列出项元素及其直接子元素：.circle, .percent 和 .label.circle_svg是一个SVG元素，它包含两个 <circle>元素。 第一个是要填充的路径，第二个用来为动画作准备。图：SVG元素：SVG包装器和圆形标签注释分为整数和小数，所以可以把它们设定为不同大小的字体。 label 是一个简单的<span>。 把所有得这些元素放在一起看起来像这样：<li class=“note-display”> <div class=“circle”> <svg width=“84” height=“84” class=“circle__svg”> <circle cx=“41” cy=“41” r=“38” class=“circle__progress circle__progress–path”></circle> <circle cx=“41” cy=“41” r=“38” class=“circle__progress circle__progress–fill”></circle> </svg> <div class=“percent”> <span class=“percent__int”>0.</span> <span class=“percent__dec”>00</span> </div> </div> <span class=“label”>Transparent</span></li>cx和cy属性定义圆的x轴和y轴中心点。 r属性定义其半径。你可能已经注意到类名中的下划线/破折号模式。 这是BEM（block element modifier），分别代表 block, element 和 modifier。 它是使元素命名更加结构化、有条理和语义化的一种方法。推荐阅读：什么是BEM以及为什么需要它为了完成模板结构，让我们将四个列表项包装在无序列表元素中：图：无序列表包装器拥有四个li子元素<ul class=“display-container”> <li class=“note-display”> <div class=“circle”> <svg width=“84” height=“84” class=“circle__svg”> <circle cx=“41” cy=“41” r=“38” class=“circle__progress circle__progress–path”></circle> <circle cx=“41” cy=“41” r=“38” class=“circle__progress circle__progress–fill”></circle> </svg> <div class=“percent”> <span class=“percent__int”>0.</span> <span class=“percent__dec”>00</span> </div> </div> <span class=“label”>Transparent</span> </li> <li class=“note-display”> <div class=“circle”> <svg width=“84” height=“84” class=“circle__svg”> <circle cx=“41” cy=“41” r=“38” class=“circle__progress circle__progress–path”></circle> <circle cx=“41” cy=“41” r=“38” class=“circle__progress circle__progress–fill”></circle> </svg> <div class=“percent”> <span class=“percent__int”>0.</span> <span class=“percent__dec”>00</span> </div> </div> <span class=“label”>Reasonable</span> </li> <li class=“note-display”> <div class=“circle”> <svg width=“84” height=“84” class=“circle__svg”> <circle cx=“41” cy=“41” r=“38” class=“circle__progress circle__progress–path”></circle> <circle cx=“41” cy=“41” r=“38” class=“circle__progress circle__progress–fill”></circle> </svg> <div class=“percent”> <span class=“percent__int”>0.</span> <span class=“percent__dec”>00</span> </div> </div> <span class=“label”>Usable</span> </li> <li class=“note-display”> <div class=“circle”> <svg width=“84” height=“84” class=“circle__svg”> <circle cx=“41” cy=“41” r=“38” class=“circle__progress circle__progress–path”></circle> <circle cx=“41” cy=“41” r=“38” class=“circle__progress circle__progress–fill”></circle> </svg> <div class=“percent”> <span class=“percent__int”>0.</span> <span class=“percent__dec”>00</span> </div> </div> <span class=“label”>Exemplary</span> </li></ul>你必须先问一下自己 Transparent、 Reasonable、 Usable 和 Exemplary 标签都代表什么意思。 随着你对编程的不断熟悉，就会发现写代码不仅仅是为了能够使程序正常运行，还需要要确保它能够被长期维护和扩展。 这些只有在你的代码容易被修改时才能够实现。“缩略词TRUE应该能够帮助你确定自己编写的代码是否能够适应未来的变化。”那么，下次问问你自己：透明：代码更改后果是否明确？合理：成本效益值得吗？可用：我是否能够在意外情况下重复使用它？示例：它是否以高质量作为未来代码的示例？Transparent（透明）：代码在修改后果是否明确？Reasonable（合理）：成本效益值得吗？Usable（可用）：我是否能够在不同的场景下重复使用它？Exemplary（示例）：未来它是否可以作为高质量作为代码范本？注：Sandi Metz在《面向对象设计实践指南：Ruby语言描述》一书解释了TRUE和其他原则，以及如何通过设计模式实现它们。 如果你还没有开始研究设计模式，请考虑将此书放到自己的案头。CSS让我们导入字体并使其对所有内容生效：@import url(‘https://fonts.googleapis.com/css?family=Nixie+One|Raleway:200’);* { padding: 0; margin: 0; box-sizing: border-box;}box-sizing: border-box 属性中包括填充与边框值到元素的总宽度和高度，所以更容易计算图形的范围。注意：有关 box-sizing的说明，请阅读“使用CSS Box让你更轻松”_。body { height: 100vh; color: #fff; display: flex; background: #3E423A; font-family: ‘Nixie One’, cursive;}.display-container { margin: auto; display: flex;}通过组合规则显示：body 中的 flex 和 .display-container 中的 margin-auto，可以将子元素垂直水平居中。 .display-container元素也将作为一个 flex-container; 这样，它的子元素会沿主轴被放置在同一行。.note-display 列表项也将是一个 flex-container。 由于有很多子项被居中，所以我们可以通过 justify-content 和 align-items 属性来完成。 所有 flex-items 都将垂直水平居中。 如果你不确定它们是什么，请查看“CSS Flexbox 可视化指南”中的对齐部分。.note-display { display: flex; flex-direction: column; align-items: center; margin: 0 25px;}让我们通过设置stroke-width，stroke-opacity 和 stroke-linecap 将笔划应用于圆，这些规则会使画面动起来。 接下来，我们为每个圆添加一种颜色：.circle__progress { fill: none; stroke-width: 3; stroke-opacity: 0.3; stroke-linecap: round;}.note-display:nth-child(1) .circle__progress { stroke: #AAFF00; }.note-display:nth-child(2) .circle__progress { stroke: #FF00AA; }.note-display:nth-child(3) .circle__progress { stroke: #AA00FF; }.note-display:nth-child(4) .circle__progress { stroke: #00AAFF; }为了绝对定位百分比元素，必须完全知道这些概念是什么。 .circle元素应该是引用，所以让我们为其添加添加 position: relative 。注意：对绝对定位更深入、直观的解释，请阅读“一劳永逸的理解 CSS Position”一文。另一种使元素居中的方法是把 top: 50%, left: 50% 和 transform: translate(-50%, -50%); 组合在一起， 将元素的中心定位在其父级中心。.circle { position: relative;}.percent { width: 100%; top: 50%; left: 50%; position: absolute; font-weight: bold; text-align: center; line-height: 28px; transform: translate(-50%, -50%);}.percent__int { font-size: 28px; }.percent__dec { font-size: 12px; }.label { font-family: 'Raleway', serif; font-size: 14px; text-transform: uppercase; margin-top: 15px;}到目前为止，模板应如该是下面这个样子：图：完成的模板元素和样式填充过渡可以在两个圆形SVG属性的帮助下创建圆形动画：stroke-dasharray 和 stroke-dashoffset。“stroke-dasharray 定义笔划中的虚线间隙模式。”它最多可能需要四个值：当它被设置为唯一的整数（ stroke-dasharray:10 ）时，破折号和间隙具有相同的大小;对于两个值（ stroke-dasharray:10 5 ），第一个应用于破折号，第二个应用于间隙;第三种和第四种形式（stroke-dasharray:10 5 2 和 stroke-dasharray:10 5 2 3 ）将产生各种样式的虚线和间隙。图：stroke-dasharray属性值左边的图像显示属性stroke-dasharray设置为 0 到圆周长度 238px。第二个图像表示 stroke-dashoffset 属性，它抵消了dash数组的开头。 它的取值范围也是从0到圆周长度。图：stroke-dasharray 和 stroke-dashoffset 属性为了产生填充效果，我们将 stroke-dasharray 设置为圆周长度，以便它所有长度都能充满其冲刺范围而不留间隙。 我们也会用相同的值抵消它，这样会使它能够被“隐藏”。 然后，stroke-dashoffset 将更新为对应的说明文字，根据过渡持续时间填充其行程。属性更新将通过CSS Variables在脚本中完成。 下面让我们声明变量并设置属性：.circle__progress--fill { --initialStroke: 0; --transitionDuration: 0; stroke-opacity: 1; stroke-dasharray: var(--initialStroke); stroke-dashoffset: var(--initialStroke); transition: stroke-dashoffset var(--transitionDuration) ease;}为了设置初始值并更新变量，让我们从使用 document.querySelectorAll 选择所有.note-display元素开始。 同时把 transitionDuration设置为900毫秒。然后，我们遍历显示数组，选择它的 .circle__progress.circle__progress--fill 并提取HTML中的 r 属性集来计算周长。 有了它，我们可以设置初始的 --dasharray 和 --dashoffset 值。当 --dashoffset 变量被 setTimeout 更新时，将发生动画：const displays = document.querySelectorAll('.note-display');const transitionDuration = 900;displays.forEach(display =&gt; { let progress = display.querySelector('.circle__progress--fill'); let radius = progress.r.baseVal.value; let circumference = 2 * Math.PI * radius; progress.style.setProperty('--transitionDuration', ${transitionDuration}ms); progress.style.setProperty('--initialStroke', circumference); setTimeout(() =&gt; progress.style.strokeDashoffset = 50, 100);});要从顶部开始过度，必须旋转 .circle__svg 元素：.circle__svg { transform: rotate(-90deg);}图：Stroke 属性转换现在，让我们计算相对于 note 的dashoffset值。 note 值将通过 data-* 属性插入每个li项目。 * 可以替换为任何符合你需求的名称，然后可以通过元素的数据集在元数据集中检索：element.dataset.*。注意：你可以在MDN Web Docs上得到有关 data-* 属性的更多信息。我们的属性将被命名为 “data-note”：&lt;ul class="display-container"&gt;+ &lt;li class="note-display" data-note="7.50"&gt; &lt;div class="circle"&gt; &lt;svg width="84" height="84" class="circle__svg"&gt; &lt;circle cx="41" cy="41" r="38" class="circle__progress circle__progress--path"&gt;&lt;/circle&gt; &lt;circle cx="41" cy="41" r="38" class="circle__progress circle__progress--fill"&gt;&lt;/circle&gt; &lt;/svg&gt; &lt;div class="percent"&gt; &lt;span class="percent__int"&gt;0.&lt;/span&gt; &lt;span class="percent__dec"&gt;00&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;span class="label"&gt;Transparent&lt;/span&gt; &lt;/li&gt;+ &lt;li class="note-display" data-note="9.27"&gt; &lt;div class="circle"&gt; &lt;svg width="84" height="84" class="circle__svg"&gt; &lt;circle cx="41" cy="41" r="38" class="circle__progress circle__progress--path"&gt;&lt;/circle&gt; &lt;circle cx="41" cy="41" r="38" class="circle__progress circle__progress--fill"&gt;&lt;/circle&gt; &lt;/svg&gt; &lt;div class="percent"&gt; &lt;span class="percent__int"&gt;0.&lt;/span&gt; &lt;span class="percent__dec"&gt;00&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;span class="label"&gt;Reasonable&lt;/span&gt; &lt;/li&gt;+ &lt;li class="note-display" data-note="6.93"&gt; &lt;div class="circle"&gt; &lt;svg width="84" height="84" class="circle__svg"&gt; &lt;circle cx="41" cy="41" r="38" class="circle__progress circle__progress--path"&gt;&lt;/circle&gt; &lt;circle cx="41" cy="41" r="38" class="circle__progress circle__progress--fill"&gt;&lt;/circle&gt; &lt;/svg&gt; &lt;div class="percent"&gt; &lt;span class="percent__int"&gt;0.&lt;/span&gt; &lt;span class="percent__dec"&gt;00&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;span class="label"&gt;Usable&lt;/span&gt; &lt;/li&gt;+ &lt;li class="note-display" data-note="8.72"&gt; &lt;div class="circle"&gt; &lt;svg width="84" height="84" class="circle__svg"&gt; &lt;circle cx="41" cy="41" r="38" class="circle__progress circle__progress--path"&gt;&lt;/circle&gt; &lt;circle cx="41" cy="41" r="38" class="circle__progress circle__progress--fill"&gt;&lt;/circle&gt; &lt;/svg&gt; &lt;div class="percent"&gt; &lt;span class="percent__int"&gt;0.&lt;/span&gt; &lt;span class="percent__dec"&gt;00&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;span class="label"&gt;Exemplary&lt;/span&gt; &lt;/li&gt;&lt;/ul&gt;parseFloat方法将display.dataset.note返回的字符串转换为浮点数。 offset 表示达到最高值时缺失的百分比。 因此，对于 7.50 note，我们将得到 (10 - 7.50) / 10 = 0.25，这意味着 circumference 长度应该偏移其值的25％：let note = parseFloat(display.dataset.note);let offset = circumference * (10 - note) / 10;更新scripts.js：const displays = document.querySelectorAll('.note-display');const transitionDuration = 900;displays.forEach(display =&gt; { let progress = display.querySelector('.circle__progress--fill'); let radius = progress.r.baseVal.value; let circumference = 2 * Math.PI * radius;+ let note = parseFloat(display.dataset.note);+ let offset = circumference * (10 - note) / 10; progress.style.setProperty('--initialStroke', circumference); progress.style.setProperty('--transitionDuration', ${transitionDuration}ms);+ setTimeout(() =&gt; progress.style.strokeDashoffset = offset, 100);});sroke属性转换为note值在继续之前，让我们将stoke转换提取到它自己的方法中：const displays = document.querySelectorAll('.note-display');const transitionDuration = 900;displays.forEach(display =&gt; {- let progress = display.querySelector('.circle__progress--fill');- let radius = progress.r.baseVal.value;- let circumference = 2 * Math.PI * radius; let note = parseFloat(display.dataset.note);- let offset = circumference * (10 - note) / 10;- progress.style.setProperty('--initialStroke', circumference);- progress.style.setProperty('--transitionDuration', ${transitionDuration}ms);- setTimeout(() =&gt; progress.style.strokeDashoffset = offset, 100);+ strokeTransition(display, note);});+ function strokeTransition(display, note) {+ let progress = display.querySelector('.circle__progress--fill');+ let radius = progress.r.baseVal.value;+ let circumference = 2 * Math.PI * radius;+ let offset = circumference * (10 - note) / 10;+ progress.style.setProperty('--initialStroke', circumference);+ progress.style.setProperty('--transitionDuration', ${transitionDuration}ms);+ setTimeout(() =&gt; progress.style.strokeDashoffset = offset, 100);+ }注意增长值还有一件事就是把 note 从0.00转换到要最终的 note 值。 首先要做的是分隔整数和小数值。 可以使用字符串方法split()。 之后它们将被转换为数字，并作为参数传递给 increaseNumber() 函数，通过整数和小数的标志正确显示在对应元素上。const displays = document.querySelectorAll('.note-display');const transitionDuration = 900;displays.forEach(display =&gt; { let note = parseFloat(display.dataset.note);+ let [int, dec] = display.dataset.note.split('.');+ [int, dec] = [Number(int), Number(dec)]; strokeTransition(display, note);+ increaseNumber(display, int, 'int');+ increaseNumber(display, dec, 'dec');});在 increaseNumber() 函数中，我们究竟选择 .percent__int 还是 .percent__dec 元素，取决于 className ，以及输出是否应包含小数点。 接下来把transitionDuration设置为900毫秒。 现在，动画表示从0到7的数字，持续时间必须除以note 900 / 7 = 128.57ms。 结果表示每次增加迭代将花费多长时间。 这意味着 setInterval将每隔 128.57ms 触发一次。设置好这些变量后，接着定义setInterval。 counter 变量将作为文本附加到元素，并在每次迭代时增加：function increaseNumber(display, number, className) { let element = display.querySelector(.percent__${className}), decPoint = className === 'int' ? '.' : '', interval = transitionDuration / number, counter = 0; let increaseInterval = setInterval(() =&gt; { element.textContent = counter + decPoint; counter++; }, interval);}图：计数增长太酷了！ 确实增加了计数值，但它在无限循环播放。 当note达到我们想要的值时，还需要清除setInterval。 可以通过clearInterval函数完成：function increaseNumber(display, number, className) { let element = display.querySelector(.percent__${className}`), decPoint = className === ‘int’ ? ‘.’ : ‘’, interval = transitionDuration / number, counter = 0; let increaseInterval = setInterval(() => {+ if (counter === number) { window.clearInterval(increaseInterval); } element.textContent = counter + decPoint; counter++; }, interval);}图：最终完成现在，数字更新到note值，并使用clearInterval()函数清除。教程到此就结束了，希望你能喜欢它！如果你想开发一些更具互动性的东西，请查看使用 Vanilla JavaScript 创建的Memory Game Tutorial 。 它涵盖了基本的HTML5，CSS3和JavaScript概念，如定位、透视、转换、Flexbox、事件处理、超时和三元组。祝你快乐的编码！????本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章 ...

SVG+React实现演示地址：https://liujialun.github.io/i…

此解决办法使用的是 vue-cli 插件 vue-cli-plugin-svg-sprite效果如下：那个朋友圈图标就是我从网上找的svg图片使用方式如下：vue add svg-spritevue.config.js添加配置，在文件内最下方找到pluginOptionsmodule.exports = { pluginOptions: { svgSprite: { /* * The directory containing your SVG files. / dir: ‘src/assets/icons’, / * The reqex that will be used for the Webpack rule. / test: /.(svg)(?.)?$/, /* * @see https://github.com/kisenka/svg-sprite-loader#configuration / loaderOptions: { extract: true, spriteFilename: ‘img/icons.[hash:8].svg’ // or ‘img/icons.svg’ if filenameHashing == false }, / * @see https://github.com/kisenka/svg-sprite-loader#configuration */ pluginOptions: { plainSprite: true } } } };再执行：npm install svgo svgo-loader –save-dev然后再在 your vue.config.js file:module.exports = { chainWebpack: config => { config.module .rule(‘svg-sprite’) .use(‘svgo-loader’) .loader(‘svgo-loader’); }};然后再assets下创建icons文件夹，将你的svg图标放入，name就是svg的名字，如下方式使用：<svg-icon name=“aperture”></svg-icon>这个组件是插件帮你生成的就会看到你的svg图标出来了 ...

作者：心叶时间：2018-04-25 16:33本篇最终项目文件Github地址：github.com/yelloxing/vue.quick/tree/V5安装npm install clay-core –save首先，通过npm安装数据可视化库clay.js，具体的api你可以查阅文档：https://yelloxing.github.io/c…这是一个非嵌入的库。初始化新建文件src/clay.js/index.jsimport render from ‘clay-core’;import Sizzle from ‘sizzle’;let clay = render(window);clay.config("$sizzleProvider", () => (selector, context) => Sizzle(selector, context));export default clay;clay.js启动前可以有多项配置，用以针对具体开发环境进行调整或加强，上面我们加强了选择器功能，因此，你可能还需要安装sizzle:npm install –save sizzle使用现在，就可以对照api使用这个库了，举例子：比如修改entry.js里面的方法：1.首先在开头导入：import clay from ‘./clay.js’;2.在需要的地方使用：el: clay(’#root’)[0],使用组件首先，我们去组件库中复制一个组件过来，组件仓库地址：https://github.com/yelloxing/clay-component复制到clay.js文件夹中，因为组件基于浏览器开发，而不是模块开发，因此，你需要在组件开发加入：import clay from “./index.js”;然后，clay.vue是使用方法：clay(“svg”) .attr(“width”, 800) .attr(“height”, 700) // 使用组件 .use(“circleTree”, { // 数据 data: program.data, // 结点名称 name: orgItem => orgItem.name, // 树的圆心和半径 cx: 350, cy: 350, r: 300, // 树结构配置 root: initTree => initTree, child: parentTree => parentTree.children, id: treedata => treedata.name + (treedata.value ? “_” + treedata.value : “”) }); ...

SVG图片压缩这是个通过借助npm包的一种方式去压缩svg的图片，由于阿里的图库自己创建的图标有大小的限制，当我们想要自己用自己的图标的时候就可以使用这种方式去完成对svg的图片压缩。1、下载node.js （地址：https://nodejs.org/zh-cn/）2、下载svgo的包下载node.js成功后，使用命令行安装 npm install -g svgo安装成功会有如下提示：（类似的提示语）Nodejs-based tool for optimizeing SVG vector graphics filesUsage: svgo [OPTIONS] [ARGS] 3、压缩svg在控制台输入： svgo E:\a.svg -o E:\b.svg第一个路径是需要压缩文件路径；-o OUTPUT 第二个是压缩后存放地址；后记：虽然网上有很多这样的文章，但是感觉还是要自己记录比较好，这样以后需要的时候直接就可以找到。另：感觉npm是个非常强大的工具。参考文档：https://www.cnblogs.com/dongx…https://www.npmjs.com/package…

每次在项目中使用icon的图标时，总是觉得引入很长的路径很麻烦，或许需要将它们写成一个个伪元素。最近发现了svg-sprite-loader可以解决你的烦恼。工作原理svg-sprite-loader实际上是把所有的svg打包成一张雪碧图，类似下图。每一个symbol装置对应的icon，再通过<use xlink:href="#xxx"/>来显示你所需的icon。symbolzhuan1.安装依赖及修改配置1.1 npm i svg-sprite-loader1.2 在bulid/webpack.base.conf.js配置文件中增加一条rules { test: /.svg$/, loader: ‘svg-sprite-loader’, include: [resolve(‘src/icons’)], options: { symbolId: ‘icon-[name]’ } }注意在vue-cli构建的项目中会默认有一条包含有svg格式的图片转成base64的rules，所以需要再稍作修改修改前，如果同时使用这两条规则会使项目启动失败。{ test: /.(png|jpe?g|gif|svg)(?.*)?$/, loader: ‘url-loader’, options: { limit: 10000, name: utils.assetsPath(‘img/[name].[hash:7].[ext]’) } }如果一个项目中有需要.svg用作图片也有用作icon的可以这样修改用作图片的{ test: /.svg$/, loader: ‘url-loader’, outputPath: path.resolve(__dirname, ./assets/images/svg)//存放icon的路径}用作icon的.include:存放icon的路径{ test: /.svg$/, loader: ‘svg-sprite-loader’, include: [resolve(‘src/icons’)], options: { symbolId: ‘icon-[name]’ }}2.在components/svgIcon 创建组件svgIcon<template> <svg :class=“svgClass” aria-hidden=“true”> <use :xlink:href=“iconName”/> </svg></template><script>export default { name: ‘SvgIcon’, props: { iconClass: { type: String, required: true }, className: { type: String, default: ’’ } }, computed: { iconName () { return #icon-${this.iconClass} }, svgClass () { if (this.className) { return ‘svg-icon’ + this.className } else { return ‘svg-icon’ } } }}</script>3.保存svg图片和全局注册svgIcon3.1 icons/svg 用来保存图片3.2 index.js 动态引入svg。作用在于虽然全局组册了svg但是在当前组件调用某个svg还是需要import这个文件，我们可以通过webpack的context.require()来解决这个问题require.context(’./svg’, false, /.svg$/),第一个参数是引入文件所在的文件夹，第二个是否引入子文件夹，第三个是匹配规则，通过这个方法就可以动态的引入svg文件了。.keys()返回svg数组.map()再获取和上下文匹配的svg文件import Vue from ‘vue’import SvgIcon from ‘@/components/SvgIcon’ // svg组件// register globallyVue.component(‘svg-icon’, SvgIcon)const requireAll = requireContext => requireContext.keys().map(requireContext)// (requireContext) => {// requireContext.keys().map(requireContext)// }// requireconst req = require.context(’./svg’, false, /.svg$/)requireAll(req)4.在入口文件引入 @/icons5.引用组件<svg-icon icon-class=“name”/> name为svg文件名阅读这篇文章后再试着写demo,可以让你的理解更加透彻 懒人神器：svg-sprite-loader实现自己的Icon组件 ...

之前生成iconfont字体图标，是用的https://icomoon.io/app/ 或者是阿里的https://www.iconfont.cn/ ，将UI给的svg图导入来生成。但是一直有个问题，假如需要再次加入几个图标时，又需要重新搞一遍，很麻烦。而使用svg-sprite-loader的方式，也不是很方便，而且在body下插入一个超大的svg标签，影响性能不说，看着这么乱的代码真是挺难受。。而且有些UI库比使用字体图标会比较便利。另外字体文件特别是woff也比svg要小很多。于是最近抽时间参考开源代码搞了个webpack插件，自动用svg生成iconfont字体图标，支持热更新。使用这个插件后，开发时在src/iconfont/svgs目录下，修改或添加、删除svg文件时，就可以自动生成字体图标（支持ttf,woff2,woff,eot,svg）及配套从css样式、html预览了；同时热更新立即可以看到效果。Byebye了我滴icomoon们！源码在这：https://github.com/hzsrc/webp…感兴趣的小伙伴可以试试~下载源码安装后直接跑npm run dev就可看效果了

这可能是个别人写过很多次的话题，但貌似由于兼容性的原因？图标的显示还是用着 Iconfont 或者 CSS Sprite 的形式？希望通过自己新瓶装旧酒的方式能重新引导一下问题。SVG vs Image比方说现在要做下图这样的视觉效果：分析：可能需要三张图片鼠标移入时的背景图渐变色前景图鼠标移入时白色前景图独立图像现在对比一下背景图使用图片与使用 SVG 格式的体积大小（做图的时候拿错颜色了，其他都一样，能说明道理就行，见谅见谅）可以看出，在肉眼感觉差异不大的情况下，WebP 格式体积最小，其次是 SVG，而 PNG 的体积过大。 这个 SVG 是在 Sketch 设计稿中导出来的，源码包含了很多冗余无效的代码，实际上是可以优化的，如下。内部源码优化后优化后大约可以减去 1K 个字符。当然这个需要内联使用（Inline SVG）CSS Sprite使用 CSS Sprite 的方式可以减少 HTTP 请求，貌似还可以减少总体图片体积。这里用前景图来对比一下，实际上背景图和前景图都可以合成一张 sprite。可以看出，CSS Sprite 的体积比 Inline SVG + CSS 的方式大很多。SVG vs Image 结论绿色部分表示 SVG 比 Image 略胜一筹的地方，黄色部分表示有所欠缺的地方，灰绿色表示差不多。1、如今已接近 2019 年了，对于 IE9 (2011年) 这种古老的浏览器都支持 SVG，所以再过多强调更低的兼容性也没有什么意思。2、Inline SVG 在浏览器应该是被渲染成 DOM 节点，所以关于 DOM 节点的性能优化都有必要注意；一个 SVG 图像可能就会有很多路径，即 DOM 节点，太多的 DOM 节点必然会影响浏览器的渲染性能及内存占用，而纯位图的渲染方式应该是没有这方面的顾虑。（DOM 数量影响参考：Google WEB 开发者文档）综上结论：除开复杂图像，选择 Inline SVG 或者 <img/> 标签的方式引入 SVG，会比使用 独立图像 或 组合图像 (CSS sprite) 的方式更好。SVG vs Iconfont书写对比首先看下 Iconfont 与 SVG 图标的使用方式，来源 阿里 Iconfont 平台很明显 SVG Sprite 使用起来没有 Iconfont 方便，需要写 3 行代码， 而后者只需要写 1 行。当然上面的不是重点，重点是下面的换色与多色支持换色与多色支持换色1、Iconfont 通过 CSS color 可以轻松更换图标颜色。2、而 SVG Sprite 比较麻烦，SVG Sprite 的代码原理如下。// 定义 symbol<svg> <symbol id=“icon-arrow-left” viewBox=“0 0 1024 1024”> <path d=“M694 … 44.576-45.952”></path> </symbol> <symbol id=“icon-arrow-right” viewBox=“0 0 1024 1024”> <path d=“M693 … 0-0.48-46.4”></path> </symbol></svg>// 使用<svg><use xlink:href="#icon-arrow-left"/></svg><svg><use xlink:href="#icon-arrow-right"/></svg>渲染出来的 DOM 结构是这样的：渲染在了 Shadow DOM 中（关于 Shadow DOM 的知识可以阅读下这篇文章或这篇），这样的 DOM 元素样式就具有了作用域，外面的 CSS 对 shadow-root 内的元素不会生效，如果想要更换元素的颜色，需要使用 /deep/ 来穿透添加样式，如下。svg /deep/ path { fill: red;}当然，实际上在只需要在父级元素上添加 fill: red 这样的 CSS 也能起到同样的效果，里面的元素会继承父级的样式。PS: /deep/ 是 shadow DOM v0 的写法，v1 已经把这样的写法抛弃了，实际上支持 v1 的 shadow DOM, 父级的样式可以直接作用在 shadow-root 里面的元素。多色支持1、Iconfont 是不支持多色图标的。2、而 SVG Sprite 可以利用 CSS 变量或 shadow DOM 的方式支持多色图标，shadow DOM 的方式上面已经说明，下面借用他人的文章解释 CSS 变量实现多色，如下。不过使用 CSS 变量或 shadow DOM 的方式兼容性都不好，CSS 变量：Edge15+shadow DOM：更差。兼容性列表3、Inline SVG 可以良好地支持多色及多色变化。渐变色支持Iconfont 与 SVG Sprite 不支持渐变色。Inline SVG 支持渐变色，并且兼容性良好。渲染无抖动使用 Iconfont，因为字体文件是异步加载的，所以在字体文件还没有加载完毕之前，图标位会留空，加载完毕后才会显示出来，这个过程就会出现向下图（来自 GitHub blog）这样的抖动，而 SVG Sprite 或 Inline SVG 内联加载则不会出现这样的抖动。当然，Iconfont 也可以内联加载，不过需要转换成 base64 同样式表一起加载，转换后的文件体积则会变为原来的 1.3 倍左右这是由 base64 编码决定的（编码知识链接）。字体转换成 base64 的一个在线工具：https://transfonter.org/体积较大这个是 SVG 对比于 Iconfont 的一个不足之处，如下图。Inline SVG 与 SVG Sprite 体积差不多。开发成本三者的开发成本都差不多，不过 SVG 的两种方式都需要前期做些配置，后期开发就会顺手很多（单页应用）。以 vue + vue cli 为例说明 Inline SVG 便捷使用。1、 配置 Webpack loader:{ // 排除需要转换成 Inline SVG 的目录 exclude: [resolve(‘src/svgicons’)], test: /.(png|jpe?g|gif|svg)(?.*)?$/, loader: ‘url-loader’, options: { limit: 1, name: utils.assetsPath(‘img/[name].[hash:7].[ext]’) }},{ // 指定特定的目录用于 Inline SVG include: [resolve(‘src/svgicons’)], test: /.svg$/, use: [ // 读取 SVG 源代码 { loader: ‘raw-loader’ }, // 精简优化 SVG 源代码 { loader: ‘svgo-loader’, options: { plugins: [ { removeTitle: true }, { removeViewBox: false }, { removeDimensions: true }, // …其他参数 ] } } ]}2、 创建 SvgIcon.vue 组件:<template> <div class=“svg-icon”> <div class=“svg-icon-wrapper” v-html=“icon”></div> </div></template><script>export default { name: ‘SvgIcon’, props: { name: { type: String, required: true, }, }, data () { return { icon: this.getIcon(), } }, watch: { name () { this.icon = this.getIcon() }, }, methods: { getIcon () { return require(@/svgicons/${this.name}.svg) }, },}</script><style lang=“stylus” scoped>.svg-icon { overflow hidden display inline-block width 1em height 1em &-wrapper { display flex align-items center >>> svg { width 100% height 100% fill currentColor } }}</style>3、使用：<SvgIcon name=“arrow-right” />SVG vs Iconfont 结论应该是 Inline SVG vs SVG Sprite vs Iconfont 的结论，如下图。综上结论选择 Inline SVG 或许是一个不错地选择去替代 Iconfont 的使用方式。扩展阅读GitHub 网站很早之前已经将图标的展示方式由 Iconfont 转成了 Inline SVG, 这一篇文章是他们的描述：https://blog.github.com/2016-…很早的一篇文章关于两者的对比：https://css-tricks.com/icon-f…最后欢迎各抒己见谈论一下对 SVG 和 Iconfont 的看法，优缺点，欢迎留言。然后，本文同步发表于【凹凸实验室博客】或微信公众号，欢迎关注我们，么么哒。 ...

SVG 动画主要内容SVG 是什么?SVG 的一些常用用途SVG 的基本结构CSS 结合 SVG 生成动画圆环动画logo 描边动画SVG 的动画元素SVG 是什么？SVG ，可缩放矢量图形（Scalable Vector Graphics），是一种用来描述二维矢量图形的 XML 标记语言。 简单地说，SVG 面向图形，HTML 面向文本。SVG 特点SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。SVG 是矢量的，可伸缩的，适用多种分辨率。SVG 是开放的标准，本质是纯粹的 XML ，可以被非常多的工具读取和修改。SVG 图像中的文本是可选的，同时也是可搜索的。SVG 兼容性IE9+，主流环境基本都能支持。具体参见SVG 的一些常用用途制作iconfont作为图片文件img src属性引用，css background-image引用。SVG作为图像引用时，大多数浏览器不会加载SVG自身引用的文件(其他图像，外部脚本，字体文件等)，依据浏览器的安全策略，SVG中定义的脚本也可能不会执行。作为应用程序SVG文件也可以作为<object>元素的data属性引入HTML中。注意，MIME type必须是image/svg+xml。<object data=“image.svg” type=“image/svg+xml”> …</object>混合文档可以直接将<svg>嵌入到XHTML或者HTML5文档中。嵌入到XHTML需要为<svg>指定命名空间（xmlns），嵌入到HTML5则可以省略，解析器会自动识别<svg>。在 HTML 内容中应用 SVG 效果SVG 的基本结构SVG 跟标签<svg xmlns=“http://www.w3.org/2000/svg" version=“1.1” width=“1024px” height=“1024px”></svg>SVG 基本形状1. 矩形（rect）<rect x=“60” y=“10” rx=“20” ry=“40” width=“100” height=“100”/>2. 圆形（circle）<circle cx=“75” cy=“75” r=“60”/>3. 椭圆（ellipse）<ellipse cx=“75” cy=“75” rx=“30” ry=“20”/>4. 线条（line）<line x1=“10” x2=“50” y1=“110” y2=“150” stroke=“black” stroke-width=“3”/>5. 折线（polyline）<polyline points=“60 60, 70 120, 80 130, 70 70” style=“fill: none;stroke-width: 2;stroke: black;”/>6. 多边形（polygon）polygon和折线很像，它们都是由连接一组点集的直线构成。不同的是，polygon的路径在最后一个点处自动回到第一个点。<polygon points=“50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180” style=“fill: none;stroke: black;”/>7. 路径（point）<path d=“M 20 230 Q 40 205, 50 230 T 90230” style=“fill: none;stroke: black”/>路径绘制命令SVG常用元素还有<g>组合，常用属性fill填充，stroke线条颜色，stroke-width线条粗细等等，具体参考MDN文档。 SVG 元素参考SVG 属性参考CSS 结合 SVG 属性生成动画stroke-dasharray可控制用来描边的点划线的图案范式。stroke-dashoffset 属性指定了dash模式到路径开始的距离圆环动画画圆环的动画效果，可用于提示加载百分比，倒计时等场景。https://codepen.io/wishingtre…logo 描边动画webank描边动画SVG 的动画元素兼容性：ie死都不支持，移动端友好。具体参见1.setset元素不能产生动画效果，可以实现基本的延迟功能。就是指：可以在特定时间之后修改某个属性值（包括本身的XML属性和CSS属性值）。2.animateattributeName 变动的属性的属性名。from 变动的初始值。to 变动的终值。dur 动画的持续时间。举个栗子形状补间动画3.animateTransformattributeName固定为transform，可针对transform的相关属性生成动画，不详细介绍了。4.animateMotion（线性路径动画）animateMotion 元素可以让SVG各种图形沿着特定的path路径运动。地球围绕太阳旋转贴合路径弧度运动SVG动画库：1.SVG-Morpheus使用参考演示参考2.snap.svg ...