记一次前端SVG实战知识分享会

时间  2020-10-18
标签 css html 前端 html5 java 面试 json 浏览器 网络 前端工程师 栏目 CSS 繁體版
原文   原文链接

记一次前端SVG实战知识分享会

记录了我在组内的技术分享, 有一样需求的同窗能够参考一下
分享全程下来时间大约 40分钟

image

一. svg与前端工程师

1. 做为一名前端工程师不可能不与svg打交道, 现在掌握svg的基本知识是我们的基本技能.
2. 学svg以前最好先学一学xml的基本知识, 这样能够更好的理解文件结构.
3. svg是很不错, 可是并非任何地方都要使用, 学习不要太刻板.

本篇重点是基础知识, 但愿您看完以后能够对svg作出一些简单的修改, 或者是一个小图片不用再等ui作完给咱们, 咱们能够本身动手制做.css

二. xml简介 (不会说的太详细)

XML 被设计用来传输和存储数据, 指可扩展标记语言（_EX_tensible _M_arkup _L_anguage）
HTML 被设计用来显示数据。html

这个头部标签 <?xml version="1.0" standalone="no"?>
  1. XML标准文件头
  2. 版本号是1.0
  3. standalone表明这个xml文件是独立的仍是依赖与外部dtd文件的 (做用是定义 XML 文档的合法构建模块) 相似java中的接口.
如今不少配置文件仍是用xml的形式好比java代码, 这些配置文件应该是用json更好.

三. svg简介

SVG 是使用 XML 来描述二维图形和绘图程序的语言。(节选自w3school)前端

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的状况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个总体
  1. 什么是矢量, 矢量图形: 面向对象的图像或绘图图像，在数学上定义为一系列由线链接的点, 一个一个的图形对象, 任意的组合.

矢量图介绍短片html5

  1. 不失真属于老生常谈的问题了, 其实在我看来svg图片能够被咱们随便修改他的样式才是最重要的, 毕竟一个png文件很差经过代码修改他的背景色, 或是某一块的大小比例.
  2. 缺点: 在window系统里, 没有图例显示不方便查看, 在mac电脑里就有个缩略图, 没找照一张图片还要把svg全打开挨个找...

<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">java

  1. 定义了svg的宽高
  2. 定义了使用1.1版本svg, 就像html同样有 4与5, svg的版本也在变化.
  3. xmlns是xml namespace的缩写，也就是XML命名空间，xmlns属性能够在文档中定义一个或多个可供选择的命名空间。该属性能够放置在文档内任何元素的开始标签中。该属性的值相似于URL，它定义了一个命名空间，浏览器会将此命名空间用于该属性所在元素内的全部内容。

例如SVG< a>元素和HTML< a>若是一个被称为svg：a和另外一个html：a,则能够区分该元素, 做用就是防止svg标签内的元素与html元素混乱一团.
html5中不写这句影响也不大.面试

兼容性以下

image

四. 基本图形

  • svg有不少基本图形如: 矩形、圆形、直线、多点成线、多边形.
  • 这些图形咱们能够直接使用
<?xml version="1.0" standalone="no"?>
<!-- 1: 总体的长宽, 规则定义  -->
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<!-- 1：矩形 -->
<!-- x, y 左上角的位置 -->
<!-- fill: 填充的颜色 -->
<rect  width="100" height="100" style="x:20; y:20;" />

<!-- 1：圆形 -->
<!-- 2: cx,cy 圆心的坐标 -->
<!-- 3: r半径 -->
<circle cx="70" cy="220" r="50" fill="red"></circle>


<!-- 3: 直线 -->
<!-- 两个点的坐标 -->
<line x1="160" y1="80" x2="300" y2="80" style="stroke:green;stroke-width:16;"></line>

<!-- 4: 多点线 -->
<!-- 会自动把第一个点与最后一个点链接起来 -->
<!-- points:一组一组的xy坐标 -->
<polyline points="500,60 330,60 420,180"></polyline>

<!-- 5: 多边形 -->
<polygon points="470,400 450,320 410,320 410,340 410,440" style="fill:red;stroke:red;stroke-width:2"></polygon>
</svg>

如图所示:json

image

  1. 这里的宽高与xy的距离你能够按px理解, 但其实这个是他的比例, 使用的时候会按这个比例等比缩放.
  2. style="stroke:green;stroke-width:16;" 定义: 若是在线内定义的是 线条的颜色为绿色, 线的宽度为16
  3. style="fill:red;stroke:red;" fill指的是填充颜色, stroke边的颜色(有时候我面试的同窗说常用svg, 可是fill属性都不知道, 场面很尴尬.)
  4. style并非绝对的, 好比第一个矩形我也能够写成<rect width="100" height="100" x="20" y="20" />
  5. 一块儿其余属性: transform="rotate(30)" 旋转角度,这里不用写deg, rx:20;ry:60; 角的弧度能够作矩形的圆角.
  6. 知道了svg无非也就是个dom那咱们就能够经过获取元素的形式进行对svg内部图像的修改了, 好比获取到这个svg里面的矩形setAttribute('x', 200)让他x轴变为200

五. 视野与视框

<?xml version="1.0" standalone="no"?>

<!-- 1: 视野 -->
<!-- viewBox: 我能看到哪一部分, 当前就是左上角 -->
<!-- viewBox就算小了, 可是总体的宽高是不变的, 因此会有放大缩小效果 -->
<!-- 2: 若是viewport和viewBox的宽高比不相同。你须要本身来指定如何在SVG阅读器（如浏览器）中显示SVG图像。你能够在<svg>中使用preserveAspectRatio属性来指定。 -->
<!-- preserveAspectRatio   meet就是保持原比例不失真-->
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none meet">
<rect 
  width="200" height="200"
  style="x:20; y:20; rx:20;ry:60; fill:rgb(0,0,255);stroke-width:16;
stroke:black"/>

</svg>

1: 不设置viewBox
image浏览器

2: 设置后
image网络

viewBox不影响总体svg的大小与比例, 只是以多大的窗口展现这个svg图片前端工程师

六. 样式分组(事情变得有趣了)

任何形式的代码都存在如何复用的问题, 咱们不可能在画出一个不规则图形而后想再画一个如出一辙的图形时, 从新画一遍
下面是复用"样式", 在g标签里面写上样式, 内部的标签会默认使用.

神奇的 g 标签

<?xml version="1.0" standalone="no"?>
<!-- 1: <g>标签分组了, 就有面向对象的概念了 -->
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<!-- 定义了总体的属性 -->
<!-- 2: 能够多层嵌套替换 -->
<g style="fill:rgb(0,0,255);stroke-width:16">
  <rect 
    width="100" height="100"
    style="x:20; y:20; rx:20;ry:60;
  stroke:black"/>

  <rect 
    width="100" height="100"
    style="x:20; y:140; rx:20;ry:60;
  stroke:black"/>
</g>
</svg>

效果以下图, 如出一辙的两个图形
image

固然<g>标签也能够嵌套使用
<?xml version="1.0" standalone="no"?>
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<g style="fill:rgb(0,0,255);stroke-width:16">
  <rect 
    width="100" height="100"
    style="x:20; y:20; rx:20;ry:60;
  stroke:black"/>

  <rect 
    width="100" height="100"
    style="x:20; y:140; rx:20;ry:60;
  stroke:black"/>
  
  <g style="fill:red;stroke-width:16">
    <rect 
      width="100" height="100"
      style="x:20; y:260; rx:20;ry:60;
    stroke:black"/>
  </g>
</g>
</svg>

如图:
image

七. 复用

我画好的图形, 我固然能够复制一份继续使用啦

使用<use>标签进行引用图形, 而且在use标签上进行新图形的操做, 能够直接设置xy之类的东西.

<?xml version="1.0" standalone="no"?>
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">
  <g id="cc">
    <rect width="100" height="100" x="20" y="20" />
  </g>
 <use xlink:href="#cc" transform="translate(160,0)" fill="red"/>
</svg>

这里可能会出现做用域的问题, 可是放在html里面就没问题了
后面会讲问什么放在html里面会好, 已经如何解决这个问题!!!
有问题的同窗能够用下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">
  <g id="cc">
    <rect width="100" height="100" x="20" y="20" />
  </g>
 <use xlink:href="#cc" transform="translate(160,0)" fill="red"/>
</svg>
</body>
</html>

效果以下:
image
image

玩到这里是否是有些.svg里面的代码在干什么已经能看懂小半了!!! 这就是会的越多越开心.

八. 渐变

<?xml version="1.0" standalone="no"?>

<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">

  <!-- 1: 定义了一组渐变, 设置id方便引用 -->
  <defs>
      <!-- 这里指定了渐变的区域, 1-0的范围 -->
      <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);
      stop-opacity:1"/>
      <stop offset="100%" style="stop-color:rgb(255,0,0);
      stop-opacity:1"/>
      </linearGradient>
  </defs>
  <!-- 1: 引入相应的渐变颜色 -->
  <ellipse cx="200" cy="190" rx="85" ry="55"
  style="fill:url(#orange_red)"/>

</svg>
  1. <defs>里面定义了一组渐变规则, 由于xml只能全部都用标签标示, 你能够理解为这个定义了个类.
  2. <defs>标签里面定义的内容是不展现的
  3. <linearGradient> 线性渐变标签, <radialGradient>放射性渐变标签(这个原理都同样)
  4. <stop> 规定了n%的位置的颜色
  5. <ellipse> 是用来作椭圆的

如图所示:
image

九. 填充

<?xml version="1.0" standalone="no"?>

<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<!-- 1: 定义填充类 -->
<defs>
<!-- 2: 内容写在这里 -->
<pattern id="cc" x="0" y="0" width="0.2" height="0.2">
   <circle cx="10" cy="10" r="10" fill="red">
   </circle>
</pattern>
</defs>
  <rect 
    width="400" height="400"
    fill="url(#cc)"
    style="x:20; y:20; rx:60;ry:60;stroke:black"/>
</svg>
  1. <pattern> 填充功能的标签
  2. 这里你能够理解为div的背景图案, 可是没有设置 background-repeat: no-repeat;

如图所示:
image

十. path的用法(能够一口气画的好长好长...)

<?xml version="1.0" standalone="no"?>

<svg width="600" height="600" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<!-- 1: 把path当成一支画笔, path就是一鼓作气的绘制操做 -->
<!-- 2: M 是移动的xy  m是移动的相对距离 c是curveto曲线图 -->
<!-- 3: L画直线 -->
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>

</svg>
  1. <path>标签相似一鼓作气的画笔, 里面会有超多绘制操做, 有了这个标签就能够很方便的封装绘制svg的编辑器了.
  2. M153 334 的意思就会在坐标为153 334的点上绘制
  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

如图所示:
image

简单的也有

<?xml version="1.0" standalone="no"?>
  <svg width="600" height="600" version="1.1"
xmlns="http://www.w3.org/2000/svg">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>
  1. M150 0 绘制起始点坐标
  2. L75 200 连线到75 200
  3. L225 200 连线到255 200
  4. Z 结束绘制, 提笔.

如图所示:
image

十一. 文本输入

怎么可能少了文字的输入
<?xml version="1.0" standalone="no"?>
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<!-- 1: 理论上svg并非一个专业处理文字的载体 -->
<!-- 2: style标签可使用大部分css属性啦, 不用要px -->
<!-- 3: xy对应的是左下角的基线, 而不是完美的左下角 -->
<!-- 4: 文字的颜色也要放在fill属性里面, 这也更符合工程化 -->
<text x="200" y="200" style="font-size:26;" fill="red">蚊子蚊子1</text>
<!-- 5: 针对里面每个字符设置距离 -->
<!-- dx dy 具体到每一个文字的距离 -->
<!-- 那么我其实能够巧用svg来搞点花里胡哨的 -->
<!-- 用波浪形画个❤ -->
<!-- 再加上动画效果, 就是扭动起来的文字啦 -->
<text x="200" y="300" dx="0 20 60 " dy="0 20 40" style="font-size:26;" fill="blue">蚊子蚊子2</text>

<!-- tspan标签对文字的单独处理(含镂空!!!!) -->
<text x="200" y="100" style="font-size:40">
  <tspan fill="red">蚊子3</tspan>
  <tspan stroke="blue" fill="none">蚊子4</tspan>
  </text>
</svg>
  1. <text>标签用来表示文字
  2. dx定义每一个文字之间的间距
  3. <tspan> 就是<text>里面单独处理字符的标签
  4. fill="none" 就能够产生扣动字了

如图所示:
image

十二. 路径文本(让你的文字沿着路径排列而已)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>textpath</title>
</head>
<body>
<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'>
    <path id="path1" d='M 100 200 Q 200 100 300 200 T 500 200' stroke='rgb(0,255,0)' fill='none'>
    </path>
    <text style='font-size:24px;'>
        <textpath xlink:href='#path1'>
            学来学去学来, 你还学得动吗哈哈哈!!
        </textpath>
    </text>
</svg>
</body>
</html>
  1. 上面使用的path标签赋予颜色是为了让你们看清文字走向
  2. <textpath>标签须要引用一个走向(今后之后你能够画出各类线路的文字, 是否是能够秀给女友看??)
  3. fill='none'很重要, 否则他会变成面积图

    去掉 fill='none':
    image

    加上 fill='none:
    image

    加上这个就能够不用在html文件中才能显示了, 也就是规定了做用域

<?xml version="1.0" standalone="no"?>
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<defs>
  <path id="my" d="M 100 200 Q 200 100 300 200 T 500 200" />
</defs>
<text x="10" y="200" style="font-size:26" fill="red">
 <textPath xlink:href="#my">
 学来学去学来, 你还学得动吗哈哈哈!!
 </textPath>  
</text>
</svg>
  1. xmlns:xlink= 属性规范了做用域
  2. 这意味着文档可访问 XLink 的属性和特性,表示前缀为xlink的元素应该由理解该规范的UA使用xlink规范来解释, 你能够理解为不与html冲突了.

十三. svg的引入(直接写svg, <embed> <object> <iframe>标签引入, 其实img也能够的 )

使用svg可不仅是把svg放在html结构中

  1. 直接写在html中, 这个我上面演示过,
  2. <embed> 标签是 HTML 5 中的新标签, 标签订义嵌入的内容，也就至关于把svg结构直接插进来了。
  3. <object> 标签是 HTML 4 的标准标签，被全部较新的浏览器支持。它的缺点是不容许使用脚本, 向 HTML 代码添加一个对象, 感受可用于服务端渲染的项目快速取得数据。
  4. iframe都快被淘汰了就别用了, 这里也不说用法了.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 1: 这个为啥网上没人说? -->
  ![](./2.基本图形.svg)
  <!-- 2: embed标签引入 -->
  <embed id="cc" src="./2.基本图形.svg" width="500" height="500"
  type="image/svg+xml"
  pluginspage="http://www.adobe.com/svg/viewer/install/" />
  <!-- 3: object -->
  <object data="./2.基本图形.svg" width="300" height="100" 
  type="image/svg+xml"
  codebase="http://www.adobe.com/svg/viewer/install/" />
</body>
</html>

十四. 作图工具

  1. SVG.js 官网
  2. Adobe Illustrator 官网
  3. 菜鸟工具

十五. 实际应用时如何破话svg的比例

仍是要单独强调一下, svg有本身的比例, 可是若是你的项目须要把svg图片撑满容器的时候, 你就要在svg标签上设置preserveAspectRatio="none meet", 不然是不容许破话svg比例的.(也可直接preserveAspectRatio ="none")

end 结束

svg不是前端工程师的必修课, 同时也不是一门必须使用的技术, 不要据说svg好就强制使用,咱们要知道它好在哪,怎么用更好才行.但经过学习svg的相关知识可使咱们能够靠本身作出更多绚丽的东西, 也会扩充不少有趣的知识点, 铸造咱们更好的思惟与知识体系.此次就是这样, 但愿和你一块儿进步.

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程