跳至主要内容

Web API从零开始——SVG

SVG 是我基本没有用过的知识块，所以这里也是边分享边学习，尽量在我自己理解的基础上来分享。

1 概念

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）；其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。

上面是 SVG 代码直接插入网页的例子。

SVG 代码也可以写在一个独立文件中，然后用 、、、 、 标签插入 SVG文件，可以获取 SVG DOM：

const svgObject = document.getElementById('object').contentDocument; const svgIframe = document.getElementById('iframe').contentDocument; const svgEmbed = document.getElementById('embed').getSVGDocument();

注意，如果使用 标签插入 SVG文件，就无法获取 SVG DOM。

3.3 读取 SVG 源码

由于 SVG文件就是一段 XML文本，因此可以通过读取 XML代码的方式，读取 SVG源码，这里还使用上面点击放大圆圈的例子：

<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet" > <circle id="mycircle" cx="400" cy="300" r="50" /> </</span>svg>

使用 XMLSerializer 实例的 serializeToString() 方法，获取 SVG元素的代码：

const svgString = new XMLSerializer() .serializeToString(document.querySelector('svg'));

3.4 SVG 图像转为 Canvas 图像

首先，需要新建一个 Image对象，将 SVG图像指定到该 Image对象的 src属性：

const img = new Image(); const svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"}); const DOMURL = self.URL || self.webkitURL || self; let url = DOMURL.createObjectURL(svg); img.src = url;

然后，当图像加载完成后，再将它绘制到 元素：

img.onload = () => { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); };

3.5 实例：散点图

下面将一张数据表格画成简单的散点图：

Date |Amount -----|------ 2014-01-01 | $10 2014-02-01 | $20 2014-03-01 | $40 2014-04-01 | $80

上面的图形，可以画成一个坐标系，Date作为横轴，Amount作为纵轴，四行数据画成一个数据点：

<svg width="350" height="160"> <g class="layer" transform="translate(60,10)"> <circle r="5" cx="0" cy="105" /> <circle r="5" cx="90" cy="90" /> <circle r="5" cx="180" cy="60" /> <circle r="5" cx="270" cy="0" /> <g class="y axis"> <line x1="0" y1="0" x2="0" y2="120" /> <text x="-40" y="105" dy="5">$10</</span>text> <text x="-40" y="0" dy="5">$80</</span>text> </</span>g> <g class="x axis" transform="translate(0, 120)"> <line x1="0" y1="0" x2="270" y2="0" /> <text x="-30" y="20">January 2014</</span>text> <text x="240" y="20">April</</span>text> </</span>g> </</span>g> </</span>svg>

标签：

评论

发表评论

此博客中的热门博文

Node.js从零开始——事件、系统和流

毕竟不是一个真正的教程，这里主要还是以普及和介绍为主，所以这一部分就是 Node.js 的其他部分介绍了，主要也就是事件触发、操作系统以及流的知识。 1 事件触发器 因为我们之前在浏览器中使用 JavaScript ，所以知道 JS 通过事件处理了许多用户的交互：鼠标的单击、键盘按钮的按下、对鼠标移动的反应等等。 在后端， Node.js 也提供了使用 events 模块 构建类似系统的选项。 具体上，此模块提供了 EventEmitter 类，用于处理事件。 使用以下代码进行初始化： const EventEmitter = require ( 'events' ); const eventEmitter = new EventEmitter (); 该对象公开了 on 和 emit 方法： emit 用于触发事件 on 用于添加回调函数（会在事件被触发时执行） 例如，创建 start 事件，并提供一个示例，通过记录到控制台进行交互： eventEmitter . on ( 'start' , () => { console . log ( '开始' ); }); 当运行以下代码时： eventEmitter . emit ( 'start' ); 事件处理函数会被触发，且获得控制台日志。 可以通过将参数作为额外参数传给 emit() 来将参数传给事件处理程序： eventEmitter . on ( 'start' , number => { console . log ( `开始 ${ number } ` ); }); eventEmitter . emit ( 'start' , 23 ); 多个参数： eventEmitter . on ( 'start' , ( start , end ) => { console . log ( `从 ${ start } 到 ${ end } ` ); }); eventEmitter . emit ( 'start' ,...
发表评论
阅读全文

JavaScript从零开始——入门（1）

  正好这段时间在学习JavaScript全栈，顺便把自己到目前为止的知识重新整理一下，做个自己能够理解的学习路径出来。 先从入门开始，老生常谈一下5W1H——有很大一部分，尤其是历史是引用自网道的JavaScript教程，特此声明： 入门篇 ​ wangdoc.com What——什么是JavaScript？ 各个网站、书籍、教程都写了无数次JavaScript的定义，最简单的一种说法就是： JavaScript是一种轻量级的脚本语言。 其实这个定义到2020的今天，有一点点不太一样了，毕竟它已经发展到一个前人无法想象的地步了，如今的JavaScript不再是只能用来编写控制其他大型应用程序的“脚本”，它还可以用来构建服务器（如最常用的Web服务器等），构造移动应用（主流的iOS或者Android），甚至可以直接编写PC端桌面应用（Windows，Mactintosh以及Linux），已经是不折不扣的“全栈”语言了。 当然其实它所提供的核心语法并不算很多，只能用来做一些数学和逻辑运算，也不提供任何与I/O相关的API，而是要靠宿主环境（host）提供，所以它其实算是 嵌入式（embedded）语言 ，现如今这诸多用途的开发，都是各大JavaScript框架的功劳：譬如服务器构建，用到了著名的Node.js；移动应用上常见的是React Native，PhoneGap/Cordova甚至jQuery Mobile；桌面应用的框架则主要是electron.js。 最后，从语法角度看，它是一种 “对象模型”语言 ，各种宿主环境通过这个模型，描述自己的功能和操作接口，从而通过JavaScript来控制对应功能；但JavaScript并不是纯粹的“面向对象的”语言，因为它还支持其他的编程范式——如函数式编程——这就导致几乎任何问题，它都可能有多种解决的方法。 Where——JavaScript可以用在哪里？ 如前所述，JavaScript的核心语法其实很精简，只包括了： 基本的语法构造 ：操作符、控制结构、语句等； 标准库 ：Array（数组）、Date（日期时间）、Math（数学库）等等。 除此之外的所有其他特性，都是由宿主所提供的API，仅仅是通过JavaScript进行调用。 如浏览器，它额外提供了如下三大类API： 浏览器控制类： 操作浏览器 DOM（文档对...
发表评论
阅读全文