关于svg: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 属性定义矩形边框的色彩 ...

August 17, 2023 · 2 min · jiezi

关于svg:解决Drawio生成svg矢量图导入Word后换行文本显示为省略号的问题

在应用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文档,能够看到,溢出的换行文本曾经被正确显示:

December 19, 2022 · 1 min · jiezi

关于svg:见微知著细节上雕花SVG生成矢量格式网站图标Favicon探究

原文转载自「刘悦的技术博客」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申明: ...

June 7, 2022 · 9 min · jiezi

关于svg:如何美化你的图表关于SVG渐变你需要了解的一切

突变在网页设计中简直随处可见,突变的背景、文字、按钮、图表等等,相比于纯色,突变的色彩显得更加灵动天然。 明天咱们要探讨的,就是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)。 ...

May 17, 2022 · 3 min · jiezi

关于svg:在线SVG在线编辑器

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

April 11, 2022 · 1 min · jiezi

关于svg:Radix-Icons-一组优雅细腻的免费开源线性图标库

一组丑陋的图标库,不仅能够用于开发利用,在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 都很优质。 ...

March 26, 2022 · 1 min · jiezi

关于svg:在线SVG在线编辑器

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

February 4, 2022 · 1 min · jiezi

关于svg:svg08<use><defs>标签创建图形引用

在 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>这样咱们就失去了一个星空~ ...

November 30, 2021 · 1 min · jiezi

关于svg:svg06svg中坐标变换与顺序的关系

一、什么是坐标变换在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) ...

November 26, 2021 · 2 min · jiezi

关于svg:svg05svg的坐标系统和坐标系

一、什么是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 是 基于前驱坐标系 的 本身坐标系 的变换,所以变换是有先后顺序的,程序扭转,变换后果就会不同,有趣味的能够看下一篇的简略例子

November 25, 2021 · 1 min · jiezi

关于svg:svg01svg简介及简单使用

一、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');}间接在浏览器关上的成果:

November 23, 2021 · 1 min · jiezi

关于svg:GrowingIO-Design-图标库从原理到实现

随着前端技术的倒退,网页中的图标(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>这样之后,能够用 来事后加载字体文件: ...

November 12, 2021 · 3 min · jiezi

关于svg:SVGSVG的夺命利器path

【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利用本次示例中最初一步向垂直方向挪动,所以它也可能做到。 ...

November 11, 2021 · 3 min · jiezi

关于svg:在线SVG在线编辑器

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

July 15, 2021 · 1 min · jiezi

关于svg:记一下漏斗图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即可。 ...

June 9, 2021 · 1 min · jiezi

关于svg:解答疑问|SVG排版『点击同时播放GIF图片与音乐』

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

March 9, 2021 · 1 min · jiezi

关于svg:SVG-动画开发实战-????️-SVG-图案动画Pattern

????️ 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 的图形区域,造成一个大的图案。 ...

December 29, 2020 · 2 min · jiezi

关于svg:SVG-动画开发实战-✨-SVG-闪烁动画Blink

✨ 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 折线会按以下色彩程序进行色彩的有限循环变动,产生闪动成果 ...

December 27, 2020 · 2 min · jiezi

关于svg:SVG-动画开发实战-SVG-描边动画Stroke

✏️ 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 代码。咱们选中元素右键复制进去。 ...

December 23, 2020 · 3 min · jiezi

关于svg:SVG-动画开发实战-????-使用-GreenSock-制作动画

???? 应用 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 中属性的作用 ...

December 19, 2020 · 2 min · jiezi

关于svg:SVG-动画开发实战-????-SVG-文件优化

???? 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 文件就是优化过后的了。 ...

December 18, 2020 · 2 min · jiezi

关于svg:SVG-动画开发实战-????-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> ...

December 17, 2020 · 2 min · jiezi

关于svg:????-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>下面代码会绘制出以下图形 ...

December 16, 2020 · 3 min · jiezi

关于svg:前端面试每日-31-第588天

明天的知识点 (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]

November 24, 2020 · 1 min · jiezi

关于svg:前端面试每日-31-第580天

明天的知识点 (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]

November 16, 2020 · 1 min · jiezi

关于svg:前端面试每日-31-第579天

明天的知识点 (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]

November 15, 2020 · 1 min · jiezi

关于svg:使用-SVG-制作加载动画

最近咱们设计师反馈,他想要做如下的一个加载动画。然而要么成果好的导出的 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 整体构造的示意代码。 ...

September 21, 2020 · 2 min · jiezi

关于svg:技术分享即构互动白板音视频同步多端实时互动同步技术实践

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

September 1, 2020 · 1 min · jiezi

关于svg:????-image2D-矢图画笔svg

作者:心叶 工夫: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结点个数,发现曾经和数据对应起来了。 ...

September 1, 2020 · 1 min · jiezi

关于svg:机器学习算法五-基于支持向量机的分类预测

申明:本次撰写以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带黑边的点是间隔以后分类器最近的点,咱们称之为反对向量。 反对向量机为咱们提供了在泛滥可能的分类器之间进行抉择的准则,从而确保对未知数据集具备更高的泛化性。 ...

August 22, 2020 · 3 min · jiezi

关于svg:SVG基础总结

最近在工作中做一个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为一个参数时: 其实是示意虚线长度和每段虚线之间的间距 两个参数或者多个参数时:一个示意长度,一个示意间距 ...

August 18, 2020 · 1 min · jiezi

关于svg:SVG基础总结

最近在工作中做一个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为一个参数时: 其实是示意虚线长度和每段虚线之间的间距 两个参数或者多个参数时:一个示意长度,一个示意间距 ...

August 18, 2020 · 1 min · jiezi

关于svg:vuecli中使用svgIcon

一、装置依赖包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文件 ...

August 15, 2020 · 1 min · jiezi

关于svg:vuecli中使用svgIcon

一、装置依赖包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文件 ...

August 15, 2020 · 1 min · jiezi

关于svg:vuecli中使用svgIcon

一、装置依赖包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文件 ...

August 15, 2020 · 1 min · jiezi

svg图标在系统中引用的bug

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

July 15, 2020 · 1 min · jiezi