JS基础系列之 |
您所在的位置：网站首页 › svg修改 › JS基础系列之 |
JS基础系列之
|
1. 概念
1.1 定义
可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript 和 SMIL 等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。 codepen.io/xjGafi/pen/… 1.2 基本属性1.2.1 笔画特性 1.2.2 填充特性 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 path 标签 在 SVG 里，你可以把 path 看成是最基本的绘制元素，正因为它是最基本的，万变不离其宗，他能演化出各种复杂的绘制效果。所以 path 是最基本也是最复杂的绘制元素。 path 标签，最重要的属性是 d 属性，它是一组指令和参数的集合。在 d 属性的值里，我们能看到一堆非常复杂的指令字符串。 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"。 No SVG support! Here's a substitute:元素必须有起始标签和结束标签。这两个标签之间的内容只会在对象数据本身不能被渲染时显示。这可以用来指定在浏览器无法显示 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 > 标签可以实现截图功能，截图实现流程： 首先声明一个基础的 SVG 模版，这个模版需要一些基础的描述信息，最重要的它要有 这对标签； 将要渲染的 DOM 模版模版嵌入 foreignObject 即可； 利用 Blob 构建 SVG 对象； 利用 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. 参考链接博客 阮一峰：SVG 图像入门教程 掘金：[译] 深入浅出 SVG 掘金：向强大的SVG迈进 CSS-Tricks: The SVG path Syntax: An Illustrated Guide 张鑫旭：深度掌握SVG路径path的贝塞尔曲线指令 张鑫旭：学习了，CSS中内联SVG图片有比Base64更好的形式 张鑫旭：SVG 简介与截图等应用 svgtrick 文档 MDN: SVG 元素参考 SVG 手册 工具 SVG Path Visualizer 📐书籍 SVG 精髓 (第 2 版) 深入理解 SVG 代码 GitHub: Interactive 3D Mall Map SVG 精髓 (第 2 版) - 示例代码 |
【本文地址】
今日新闻 |
推荐新闻 |