2024年Web前端最新svg基础(1)，字节跳动在哪面试

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

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

资料截图 ：

高级前端工程师必备资料包

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

SVG样式：

==========

fill：填充色，改变文字 的颜色也用它。

stroke：轮廓线的颜色。

stroke-width：轮廓线的宽度。

stroke-linecap：线头端点的样式，圆角，直角等。

stroke-dashanray：虚线的样式。(实例)") 第一个是虚线长度，第二个是间隔空白长度…

opacity：透明度，0.0为完全透明，1.0完全不透明。

font-family：字体。

font-size：字体大小。

font-weight：字体粗细。

font-style：字体的样式，斜体等。

text-decoration：上画线、下划线等。

SVG标记 ：

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

标记(marker)，也就是给线段添加箭头。marker定义一组标记，defs定义可重复利用的图形。

marker的一些属性：

viewBox：坐标系的区域

refX,refY：在viewBox内的基准点，绘制时此点在直线端点上。

markerWidth,markerHeight：标识的大小。

orient：绘制方向，可设定为auto(自动确认方向)和角度值。

id：标识的id号。

给线段添加箭头，首先先定义一个箭头，在调用这个箭头。

<marker id=“arrow”

markerUnits=“strokeWidth”

markerWidth=“12”

markerHeight=“12”

viewBox=“0 0 12 12”

refsX=“6”

refsY=“6”

orient=“auto”>

这是一条带箭头的曲线：

<path d=“M20,70 T80,100 T160,80 T200,90”

fill=“white” stroke=“red” stroke-width=“2”

marker-start=“url(#arrow)”

marker-mid=“url(#arrow)”

marker-end=“url(#arrow)” />

marker-start：路径起点处。

marker-mid：路径中间端点处。(箭头将绘制在路径的节点处，so对直线无效)

marker-end：路径终点处。

SVG滤镜：

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

滤镜可使图形具有艺术效果，对源图形的数学参数不会改变，只是进行了渲染后传给显示器。

滤镜filter和标识marker使用方法是一样的。在 中定义，设定一个id定义需要用到的滤镜，在调用。

可以通过W3C看一些需要的滤镜效果。

SVG渐变：

==========

有线性渐变、放射性渐变。

渐变也是定义在 标签中，定义一个id号，在调用这个id。例：

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

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

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

9bed3a9be2e6e9b57992dd8c440fe771.gif)

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

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

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

[外链图片转存中…(img-LZbNgqec-1715429354223)]