JS基础系列之 —— SVG 基础

·  阅读 782

1. 概念

1.1 定义

可缩放矢量图形(Scalable Vector Graphics,SVG),是一种用于描述二维的矢量图形,基于 XML 的标记语言。作为一个基于文本的开放网络标准,SVG 能够优雅而简洁地渲染不同大小的图形,并和CSSDOMJavaScriptSMIL 等其他网络标准无缝衔接。本质上,SVG 相对于图像,就好比 HTML 相对于文本。

codepen.io/xjGafi/pen/…

1.2 基本属性

1.2.1 笔画特性

1.2.2 填充特性

1.3 重点属性

1.3.1 viewBox 属性

viewBox 属性的值有四个数字,分别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中,SVG 图像宽度是 100px , 高度是 100px ,viewBox属性指定视口从(50, 50)这个点开始。所以,实际看到的是右下角的四分之一圆。

效果:Attention Required! | Cloudflare

注意,视口必须适配所在的空间。上面代码中,视口的大小是 50 x 50,由于 SVG 图像的大小是 100 x 100,所以视口会放大去适配 SVG 图像的大小,即放大了四倍。

如果不指定width属性和height属性,只指定viewBox属性,则相当于只给定 SVG 图像的长宽比。这时,SVG 图像的默认大小将等于所在的 HTML 元素的大小。(width、height 和 viewBox 属性都不指定时,默认宽度是 300px , 高度是 150px )

1.4 基本标签

基本标签的图形标签这块相对比较好理解,我们直接一张表总结下。

1.5 重点标签

1.5.1 path 标签

在 SVG 里,你可以把 path 看成是最基本的绘制元素,正因为它是最基本的,万变不离其宗,他能演化出各种复杂的绘制效果。所以 path 是最基本也是最复杂的绘制元素。

path 标签,最重要的属性是 d 属性,它是一组指令和参数的集合。在 d 属性的值里,我们能看到一堆非常复杂的指令字符串。

<path
  d="
    M73.8616812,68.8664775
    L74.5015359,74.5939423
    L68.1746283,71.7969507
    C66.2299599,72.4159872 64.1377269,72.7711218 61.9444643,72.7711218
    C51.9719158,72.7711218 43.8883163,65.7823167 43.8883163,57.1611168
    C43.8883163,48.5399169 51.9719158,41.5511118 61.9444643,41.5511118
    C71.9164005,41.5511118 80,48.5399169 80,57.1611168
    C80,61.8286883 77.6181486,66.006419 73.8616812,68.8664775
  " 
  fill="#000">
</path>
复制代码
  • d 属性里的那些指令

以上是 path 路径中的全部指令,并且每个指令都有对应的小写指令。

例如 M 10,10 有对应的 m 10,10

  • 大写代表绝对位置,所谓绝对位置即对 SVG 画布左上角原点的绝对。

  • 小写代表相对位置,所谓相对位置是以当前画笔所在位置进行定位。

1.6 SVG 绘制奥运五环

codepen.io/xjGafi/pen/…

2. 使用

2.1 将 SVG 作为图像

SVG 是一种图像格式,因此可以使用与其他图像类型相同的方式包含在 HTML 页面中。

具体可以采用两种方法:

  • 将图像包含在 HTML 标记的 元素内(当图像是页面的基本 组成部分时,推荐这种方式);

  • 或者将图像作为另一个元素的 CSS 样式属性插入(当图像主要用来装饰时,推荐这种方式)。

将 SVG 文件作为图像包含进来时,无论使用哪种方法,都具有一定的局限性。图像渲染 (即“绘制”,也就是 SVG 代码被转换为栅格图像以用于显示)时与主页面是分离的,而且无法在两者之间进行通信。主页面上的样式对 SVG 无效。此外,运行在主页面上的脚本也无法感知或者修改 SVG 的文档结构。

codepen.io/xjGafi/pen/…

IE 浏览器是支持直接内联的,只是,IE 浏览器出于安全考虑,需要对一些字符进行安全转义。

2.2 将 SVG 作为应用程序

要将外部 SVG 文件整合到 HTML 页面中,而又不想受到作为图像嵌入时的种种限制的话,可以使用嵌入对象。

元素是嵌入外部文件到 HTML(第 4 版及以上版本)以及 XHTML 文档中一种通用方式。它还可以用于嵌入任意类型的文件,只要浏览器有解析该文件类型的应用程序(浏览器插件或者扩展)即可。使用 嵌入 SVG,可以让那些不能直接显示 SVG 但是有 SVG 插件的老版本浏览器用户也能查看图像。

元素的 type 属性表示要嵌入的文件类型。这个属性应该是一个有效的网络媒体类型(通常被称为 MIME 类型)。对于 SVG,使用 type="image/svg+xml"。

<object data="cat.svg" type="image/svg+xml" title="Cat Object" alt="Cat"> 
    <p>No SVG support! Here's a substitute:</p>
    <img src="cat.png" title="Cat Fallback" alt="Cat"/>
</object>
复制代码

元素必须有起始标签和结束标签。这两个标签之间的内容只会在对象数据本身不能被渲染时显示。这可以用来指定在浏览器无法显示 SVG 时应显示的备用图像或者警告文本。

2.3 混合文档中的 SVG 标记

上面介绍的是显示一个单独、完整的 SVG 文件的两种方法。然而,我们也可以在一个文件同时包含 SVG 代码与 HTML 或者 XML 标记。

2.3.1 SVG 中的 foreign object

在 SVG 内插入部分 HTML(或其他)内容。

对于创建混合 SVG/XHTML 文档, 元素极具潜力,但是目前未得到很好的支持。IE(到版本 11 为止)根本不支持它,在其他浏览器实现中也还存在错误和不一致性。

codepen.io/xjGafi/pen/…

< foreignObject > 标签可以实现截图功能,截图实现流程:

  1. 首先声明一个基础的 SVG 模版,这个模版需要一些基础的描述信息,最重要的它要有 这对标签;

  2. 将要渲染的 DOM 模版模版嵌入 foreignObject 即可;

  3. 利用 Blob 构建 SVG 对象;

  4. 利用 URL.createObjectURL(svg) 取出 URL。

2.3.2 在 HTML5 中内联 SVG

这种在 Web 页面中包含 SVG 的方式 称为内联 SVG。最简单的方式就是在顶级 元素上设置 xmlns="http://www. w3.org/2000/svg",它会改变该元素以及其所有子节点的默认命名空间。对于 HTML5 文档 (使用 的文件),在标记中可以跳过命名空间声明。HTML 解析器会自动辨别 元素和它的子节点都在 SVG 命名空间内,除了 元素的子元素。

这种做法允许 HTML 和 SVG 两者之间进行通信。这意味着可以使用主页面的 CSS 和 JS 修改 SVG 的文档结构。

Demo 1 :使用 CSS 对内嵌 SVG 图形进行简单的交互

codepen.io/xjGafi/pen/…

Demo 2 :将多个 SVG 拼接制作 icon 工具库

codepen.io/xjGafi/pen/…

元素

  • 复杂的图形中经常会出现重复的元素,可以使用 标签再次显示它们。要指定想要重用的组合,给 xlink:href 属性指定 URI 即可,同时还要指定 x 和 y 的位置以表示组合的 (0, 0) 点应该移动到的位置。

元素

  • 通过在起始和结束 标记之间放置这些组合对象,我们可以告诉 SVG 只定义但不显示它们。实际上,SVG 规范推荐我们将所有想要复用的对象放置在 元素内,这样 SVG 阅读器进入流式环境中就能更高效地处理数据。

  • 由于组合在 元素内,它们不会立刻绘制到屏幕上,而是作为“模板”供其他地方使用。

元素

  • 元素会将其所有子元素作为一个组合,并为它们提供一些注解,这使得我们的文档结构更为清晰。除此之外, 元素还提供了一些书写上的便利。

元素

  • 元素提供了另一种组合元素的方式。和 元素不同, 元素永远不会显示,因此我们无需把它放在 规范内。然而,我们仍然习惯将它放到 中,因为 symbol 也是我们定义的供后续使用的元素。symbol 还可以指定 viewBox 和 preserveAspectRatio 属性,通过给 元素添加 width 和 height 属性就可以让 symbol 适配视口大小。

3. 参考链接

博客

文档

工具

书籍

代码

分类:
前端
收藏成功!
已添加到「」, 点击更改