SVG内容学习笔记

标签： Javascript 分类：前端创建时间：2021-07-25 07:32:10 更新时间：2024-11-15 10:49:43

参考文章:
1.SVG 基本知识：SVG 放大缩小之 viewbox 初探 (1)
2.[SVG]等比例縮放圖形 viewBox屬性
3.如何让SVG整体任意自动缩放 viewBox是SVG的虚坐标系, 为根节点svg元素加上viewBox属性后, 在svg下的各图形元素的大小和位置都是按viewBox限定的坐标, 而不是页面的实际坐标
4.SVG元素缩放的问题一种是使用SVG元素的viewBox属性,另一种方法是使用svg的transform属性
5.理解SVG坐标系统和变换： transform属性

自适应

参考文章:
1.svg viewBox与自适应这里分别举了几个例子，最后还提供了一个自适应的例子。设置viewBox作为我们的固定绘图大小也就是包裹物体的大小，svg视口（viewport）为百分比（preserveAspectRatio默认值为xMidYMid meet不用另外设置）。如此，当svg由于窗口大小改变时，其内容也能自适应地缩小或者放大。
2.svg整体缩放至指定大小缩放后，元素的中心坐标也会跟着变化缩放，所以元素的位置会偏移。为防止这种偏移，对svg不仅仅要进行scale（缩放），还要进行translate（中心平移）
3.getBBox

往期推荐

文章目录

1. 自适应

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。