跟月影学可视化
月影
奇虎360奇舞团团长,可视化UI框架SpriteJS核心开发者,《JavaScript王者归来》作者
立即订阅
3714 人已学习
课程目录
已更新 13 讲 / 共 45 讲
0/4登录后,你可以任选4讲全文学习。
课前必学 (2讲)
开篇词 | 不写网页的前端工程师,还能干什么?
免费
预习 | Web前端与可视化到底有什么区别?
图形基础篇 (4讲)
01 | 浏览器中实现可视化的四种方式
02 | 指令式绘图系统:如何用Canvas绘制层次关系图?
03 | 声明式图形系统:如何用SVG图形元素绘制可视化图表?
04 | GPU与渲染管线:如何用WebGL绘制最简单的几何图形?
数学篇 (5讲)
05 | 如何用向量和坐标系描述点和线段?
06 | 可视化中你必须要掌握的向量乘法知识
07 | 如何用向量和参数方程描述曲线?
08 | 如何利用三角剖分和向量操作描述并处理多边形?
09 | 如何用仿射变换对几何图形进行坐标变换?
视觉基础篇 (1讲)
10 | 图形系统如何表示颜色?
特别放送 (1讲)
加餐一 | 作为一名程序员,数学到底要多好?
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

03 | 声明式图形系统:如何用SVG图形元素绘制可视化图表?

月影 2020-06-26
你好,我是月影。今天,我们来讲 SVG。
SVG 的全称是 Scalable Vector Graphics,可缩放矢量图,它是浏览器支持的一种基于 XML 语法的图像格式。
对于前端工程师来说,使用 SVG 的门槛很低。因为描述 SVG 的 XML 语言本身和 HTML 非常接近,都是由标签 + 属性构成的,而且浏览器的 CSS、JavaScript 都能够正常作用于 SVG 元素。这让我们在操作 SVG 时,没什么特别大的难度。甚至,我们可以认为,SVG 就是 HTML 的增强版
对于可视化来说,SVG 是非常重要的图形系统。它既可以用 JavaScript 操作绘制各种几何图形,还可以作为浏览器支持的一种图片格式,来 独立使用 img 标签加载或者通过 Canvas 绘制。即使我们选择使用 HTML 和 CSS、Canvas2D 或者 WebGL 的方式来实现可视化,但我们依然可以且很有可能会使用到 SVG 图像。所以,关于 SVG 我们得好好学。
那这一节课,我们就来聊聊 SVG 是怎么绘制可视化图表的,以及它的局限性是什么。希望通过今天的讲解,你能掌握 SVG 的基本用法和使用场景。

利用 SVG 绘制几何图形

在第 1 节课我们讲过,SVG 属于声明式绘图系统,它的绘制方式和 Canvas 不同,它不需要用 JavaScript 操作绘图指令,只需要和 HTML 一样,声明一些标签就可以实现绘图了。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《跟月影学可视化》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(7)

  • 宇宙全栈
    1. 使用 CSS 设置样式的好处:可以将样式和节点解耦,有利于样式的模块化和复用,比如多种主题色,一键换色等。
    2. 先用 SVG 生成层级关系图,再用 Canvas 来完成绘制,此时 SVG 将作为一张静态图片被绘制在 Canvas 中。和单独使用 Canvas 绘图相比,这种混合方式代码量更少,代码更加可读,易维护。

    作者回复: 赞~说得挺好的

    2020-06-27
    6
  • Geek_3469f6
    if(target.nodeName === 'text') target = target.parentNode;
     
    请问,这句代码是不是有问题?找到文本节点的父节点,是group节点。设置了fill,有什么用处?

    作者回复: 对,看得非常仔细,这里的确是有问题,应该要设置这个节点之前的那个circle节点而不是group节点,你可以试着把github示例代码里面这块修复一下,然后提交一个pr

    2020-06-26
    1
    2
  • coder
    做可视化组件,从性能的角度来讲,是SVG好一些,还是Canvas好一些?

    作者回复: 一般Canvas更好,但也不是绝对的,还需要看具体做什么。绘制图形越多,Canvas相比SVG的性能优势会越明显。

    2020-07-03
  • Geek_07ad60
    还是不太理解声明式和指令式,请老师再详解一下,谢谢!

    作者回复: 之所以说声明式是说svg只要声明一个元素添加到DOM树上就能绘制出来,而canvas则需要调用绘图指令,两者机制有区别。

    2020-06-29
    1
  • Cailven
    关于svg,我补充一点,如今微信公众号互动图文支持使用svg制作交互和动画,但不支持js语言,因此掌握原生svg语言非常重要,并不是任何场景都可以使用js来声明和调用该系统的。

    作者回复: 很棒

    2020-06-28
    1
  • 特异型大光头
    <!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 xmlns="http://www.w3.org/2000/svg" version="1.1">
        </svg>
        <script>
            const svgroot = document.querySelector('svg');
            const circle = document.createElementNS('http://http://www.w3.org/2000/svg', 'circle');
            circle.setAttribute('cx', 100);
            circle.setAttribute('cy', 100);
            circle.setAttribute('r', 50);
            circle.setAttribute('fill', '#ff0000');
            svgroot.appendChild(circle);
        </script>
    </body>

    </html>
    老师为何我创建后,控制台也生成了svg,和circle,但就是页面上显示不出来...

    作者回复: document.createElementNS('http://http://www.w3.org/2000/svg', 'circle');

    这里写错了,应该是http://www.w3.org/2000/svg,你多写了一个http:

    2020-06-26
    1
  • 姚凯伦
    最近也遇到过用svg绘制元素太多导致渲染卡顿问题,后来改用使用一条 path 绘制所有元素,但是 path 一长也同样存在渲染卡顿问题,不知道老师有没有遇到过类似的问题

    作者回复: 是的,path长导致图形绘制得太复杂也会有问题,具体要看你的数据量,如果达到瓶颈,不太好彻底解决,只能换成canvas2d或者webgl。在后续课程性能篇中会有详细的介绍。

    2020-06-26
收起评论
7
返回
顶部