2024年Web前端最新svg基础(2)，2024年最新字节跳动前端算法面试题

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）

八、文本

SVG样式：

SVG标记：

SVG滤镜：

SVG渐变：

---

因为需要所以开始了，D3.js的学习之路。

在开始学的时候，发现的学习D3.js需要有一些SVG和canvas的知识，这些是我之前都没有接触过的，所以现在从svg开始学习了。

SVG可缩放矢量图，使用XML格式SVG文件必须使用.svg后缀来保存。先来一个例子：

<?xml version="1.0" standalone="no"?>

<circle cx=“100” cy=“50” r=“40” stroke=“black”

stroke-width=“2” fill=“red” />

SVG 代码解析：

=============

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用。

standalone=“no” 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 SVG 元素。

SVG 代码以

SVG 的 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。

fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

关闭标签的作用是关闭 SVG 元素和文档本身。

**注释：**所有的开启标签必须有关闭标签！

SVG中预定义了七种形状元素：

===================

分别为：矩形 、圆形 、椭圆形 、线段 、折线 、多边线 、路径 。

一、矩形

---

六个参数：

x：矩形左上角的x坐标； y：矩形左上角的y坐标；

width：矩形的宽度；height：矩形的高度；

rx：对于圆角矩形，指定椭圆在x方向的半径；ry：对于圆角矩形，指定椭圆在y方向的半径。

建议在菜鸟教程中**实例**操作一下，可以加深印象(自己修改参数的值，看效果)。

二、圆形

---

三个参数：

cx：圆心的x坐标；cy：圆心的y坐标；r：圆的半径。

<circle cx=“100” cy=“50” r=“40” stroke=“black”

stroke-width=“2” fill=“red”/>

菜鸟教程**实例**操作

三、椭圆

---

四个参数：

cx：圆心的x坐标； cy：圆心的y坐标；

rx：椭圆的水平半径；ry：椭圆的垂直半径。

<ellipse cx=“300” cy=“80” rx=“100” ry=“50”

style=“fill:yellow;stroke:purple;stroke-width:2”/>

菜鸟教程**实例**操作。

四、线段

---

四个参数：

x1：起点的x坐标；y1：起点的y坐标；

x2：终点的x坐标；y2：终点的y坐标；

// 实例

五、折线

---

属性points：“x,y x1,y1 x2,y2”;(x,y是坐标，x1,y1是下一个坐标)每一组都用空格分隔。

六、多边形

---

多边形就是折线的最起始和最后的点连接，得到的图形。

<polygon points=“100,20 20,90 60,160 140,160 180,90”

style=" fill:LawnGreen; stroke:black; stroke-width:3 "/>

七、路径

---

M=moveto：将笔画移动到指定坐标。

L=lineto：画直线到指定坐标。

H=horizontal lineto：画水平直线到指定坐标。

V=vertical lineto：画垂直直线到指定坐标。

C=curveto：画三次贝塞尔曲线经两个指定控制点到达终点坐标。

S=shorthand/smooth curveto：与前一条三次贝赛尔曲线相连，第一个控制点前一条曲线第二个控制点的对称点，只需输入第二个控制点和终点，即可绘制一个三次贝赛尔曲线。

Q=quadratic Bezier curveto：画二次贝赛尔曲线一个指定控制点到达终点坐标。

T=Shortand/smooth quadratic Bezier curveto：与前一条二次贝赛尔曲线相连，第一个控制点前一条曲线第二个控制点的对称点，只需输入第二个控制点和终点，即可绘制一个二次贝赛尔曲线。

A=elliptical arc：画椭圆曲线到指定坐标。

Z=closepath：绘制一条直线连接终点和起点，用来封闭图形。

上述命令都是用大写英文字母，表示坐标系中的绝对坐标(absolute)。也可以用小写英文字母，表示相对坐标(相对当前笔画所在点)。

弧线：A( rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y)

rx：椭圆x方向半轴大小；ry：椭圆y方向半轴大小；x-axis-rotation：椭圆形的x轴与水平轴顺时针方向的夹角；large-arc-flag：有两个值(1:大角度弧线,0:小角度弧线)；sweep-flag：有两个值(1:顺时针至终点,0:逆时针至终点)；x：终点x坐标；y：终点y坐标。

八、文本

---

六个参数：

x：文本位置的x坐标；y：文字位置的y坐标；

dx：相对于当前位置在x方向上平移的距离(值为正则往右，负则往左)。

dy：相当于当前位置在y方向上平移的距离(值为正则往下，负则往上)。

textLength：文字的显示长度(不足则拉长，足则压缩)。

totate：旋转角度(顺时针为正，逆时针为负)。

如果对多个文字中的部分文字单独定义样式可以用 标签。

I am programmer

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素