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

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

    共 4 条评论
    35
  • Geek_3469f6
    2020-06-26
    if(target.nodeName === 'text') target = target.parentNode; 请问，这句代码是不是有问题？找到文本节点的父节点，是group节点。设置了fill，有什么用处？

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

    共 4 条评论
    7
  • Frojan
    2020-09-06
    canvas绘制svg，和单独用svg对比，好处是可以规避svg节点过多时的性能瓶颈，但是也失去了svg方便的可交互性。和单独用canvas对比，写法就由写一堆绘制指令变成了写声明式svg加一句绘图指令，单纯绘制性能在绘制指令多且复杂的情况貌似有比较大的提升？(这个不确定svg的解析时间是不是可以忽略) ，但是交互还得使用canvas的方式实现，如果要做动画也会变得麻烦。

    作者回复: 对，有得就有失

    
    5
  • Geek_00734e
    2021-01-10
    SVG画出来的效果看着更加清晰，canvas画出来的好模糊，这是什么原因啊。尺寸都是一样的

    作者回复: 因为屏幕像素密度问题，根据devicePixelRate不同要将canvas设置对大小

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

    作者回复: 很棒

    共 2 条评论
    4
  • coder
    2020-07-03
    做可视化组件，从性能的角度来讲，是SVG好一些，还是Canvas好一些？

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

    
    3
  • Geek_07ad60
    2020-06-29
    还是不太理解声明式和指令式，请老师再详解一下，谢谢！

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

    共 2 条评论
    3
  • 特异型大光头
    2020-06-26
    <!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:

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

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

    
    2
  • 段亚东
    2020-12-09
    这两个案例，为什么不直接用div css画呢？

    作者回复: 这节课讲svg呀

    
    