面试宝典！SVG面试题和答案汇集

本文概述

1)SVG的完整形式是什么？
2)什么是SVG？
3)哪个标签用于在SVG中绘制矩形？
4)哪个标签用于在SVG中画线？
5)哪个标记用于在SVG中绘制圆？
6)哪个标签用于绘制SVG中的任何路径？
7)哪个标签用于在SVG中创建连接的直线的开放形状？
8)哪个标签用于在SVG中创建连接的直线的闭合形状？
9)哪个标签用于在SVG中绘制文本？
10)路径元素的哪个命令会创建一条线？
11)路径元素中的哪个命令关闭了SVG中的路径？
12)使用哪个path元素命令将光标从一个点移动到另一点？
13)使用哪个path元素命令创建水平线？
14)使用哪个path元素命令创建垂直线？
15)使用哪个路径元素命令创建平滑曲线？
16)笔画的哪个属性定义了元素的文本, 线条或轮廓的颜色？
17)笔划的哪个属性定义元素的文字, 线条或轮廓的粗细？
18)笔画的哪个属性定义了线条或任何路径的轮廓的不同结尾类型？
19)笔划的哪个属性用于创建虚线？
20)哪个SVG元素用于对SVG形状进行分组？
21)如何在HTML中添加SVG？
22)什么是SVG中的过滤器？
23)列出一些常用的SVG过滤器？
24)哪个滤镜用于显示SVG中的模糊效果？
25)SVG中的模式是什么？
26)SVG中的梯度是什么？
27)什么是SVG线性梯度？
28)什么是径向渐变？
29)列出一些主要的互联网浏览器支持SVG吗？
30)哪个元素用于制作SVG图形的动画？
31)是否可以根据用户的操作制作SVG图像？
32)我们可以在SVG图像中编写JavaScript函数吗？
33)哪个元素用于在SVG中创建链接？
34)根据特定路径使用哪个元素裁剪SVG形状？
35)什么是SVG遮罩？
36)列举一些常用的SVG工具吗？
37)使用哪个变换将坐标系旋转指定角度？
38)如何在SVG中绘制圆？
39)如何在SVG中绘制矩形？
40)如何在SVG中绘制椭圆？
41)如何在SVG中绘制自由流动路径？

文章图片
以下列出了SVG面试中最常见的问题和解答：
1)SVG的完整形式是什么？ SVG的完整形式是可缩放的矢量图形。
2)什么是SVG？ SVG是基于XML的格式。它用于绘制二维矢量图像, 由于该矢量图像, 如果缩小或调整SVG图像的大小, 它将永远不会丢失质量。
3)哪个标签用于在SVG中绘制矩形？ < rect> 标签用于在SVG中绘制矩形。
例：

< !DOCTYPE html> < html> < body> < svg width="500" height="500"> < rect x="50" y="50" width="200" height="200" style="fill:green; stroke:orange; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9" /> < /svg> < /body> < /html>

4)哪个标签用于在SVG中画线？ < line> 标签用于在SVG中绘制一条线。
例：

< !DOCTYPE html> < html> < body> < svg height="500" width="450"> < line x1="5" y1="5" x2="150" y2="150" style="stroke:rgb(0, 0, 255); stroke-width:3" /> < /svg> < /body> < /html>

5)哪个标记用于在SVG中绘制圆？ < circle> 标签用于在SVG中绘制一个圆。
例：

< !DOCTYPE html> < html> < body> < svg height="250" width="250"> < circle cx="70" cy="70" r="40" stroke="red" stroke-width="3" fill="pink" /> < /svg> < /body> < /html>

6)哪个标签用于绘制SVG中的任何路径？ < path> 标签用于在SVG中绘制任何路径。
例：

< !DOCTYPE html> < html> < body> < svg height="450" width="450"> < path d="M250 10 L100 200 L400 200 Z" /> < /svg> < /body> < /html>

7)哪个标签用于在SVG中创建连接的直线的开放形状？ < polyline> 标签用于在SVG中创建连接的直线的开放形状。
例：

< !DOCTYPE html> < html> < body> < svg height="450" width="450"> < polyline points="10, 20 40, 30 55, 45 76, 125 125, 135 210, 200" style="fill:none; stroke:black; stroke-width:3" /> < /svg> < /body> < /html>

8)哪个标签用于在SVG中创建连接的直线的闭合形状？ < polygon> 标签用于在SVG中创建连接直线的闭合形状。
9)哪个标签用于在SVG中绘制文本？ < text> 标签用于在SVG中绘制文本。
例：

< !DOCTYPE html> < html> < title> SVG Text< /title> < body> < h1> SVG Text< /h1> < svg width="950" height="950"> < g> < text x="40" y="23" > Text: < /text> < text x="40" y="40" fill="rgb(121, 0, 121)"> WWW.srcmini.COM< /text> < /g> < /svg> < /body> < /html>

10)路径元素的哪个命令会创建一条线？ ” L” 命令用于创建一行。
11)路径元素中的哪个命令关闭了SVG中的路径？ ” Z” 命令用于关闭路径。
12)使用哪个path元素命令将光标从一个点移动到另一点？路径元素的” M” 命令用于将光标从一个点移动到另一点。
13)使用哪个path元素命令创建水平线？路径元素的” H” 命令用于创建水平线。
14)使用哪个path元素命令创建垂直线？路径元素的” V” 命令用于创建垂直线。
15)使用哪个路径元素命令创建平滑曲线？路径元素的” S” 命令用于创建平滑曲线。
16)笔画的哪个属性定义了元素的文本, 线条或轮廓的颜色？ < stroke> 属性定义SVG中元素的文本, 线条或轮廓的颜色。
例：

< !DOCTYPE html> < html> < title> SVG Stroke Example< /title> < body> < h1> SVG Stroke< /h1> < svg width="500" height="500"> < g> < text x="30" y="30" > Using stroke: < /text> < path stroke="blue" d="M 50 50 L 300 50" /> < path stroke="orange" d="M 50 70 L 300 70" /> < path stroke="red" d="M 50 90 L 300 90" /> < /g> < /svg> < /body> < /html>

17)笔划的哪个属性定义元素的文字, 线条或轮廓的粗细？ < stroke-width> 属性定义元素的文本, 线条或轮廓的粗细。
例：

< !DOCTYPE html> < html> < title> SVG Stroke Example< /title> < body> < h1> SVG Stroke< /h1> < svg width="800" height="800"> < text x="30" y="10" > Using stroke-width: < /text> < path stroke-width="2" stroke="blue" d="M 50 50 L 300 50" /> < path stroke-width="4" stroke="orange" d="M 50 70 L 300 70" /> < path stroke-width="6" stroke="red" d="M 50 90 L 300 90" /> < /svg> < /body> < /html>

18)笔画的哪个属性定义了线条或任何路径的轮廓的不同结尾类型？ < stroke-linecap> 属性定义线的结尾或任何路径的轮廓的不同类型。
例：

< !DOCTYPE html> < html> < title> SVG Stroke Example< /title> < body> < h1> SVG Stroke< /h1> < svg width="900" height="900"> < g> < text x="30" y="30" > Using stroke-linecap: < /text> < path stroke-linecap="square" stroke-width="7" stroke="blue" d="M 50 50 L 300 50" /> < path stroke-linecap="round" stroke-width="7" stroke="orange" d="M 50 70 L 300 70" /> < path stroke-linecap="butt" stroke-width="7" stroke="red" d="M 50 90 L 300 90" /> < /g> < /svg> < /body> < /html>

19)笔划的哪个属性用于创建虚线？ < stroke-dasharray> 属性用于创建虚线。
例：

< !DOCTYPE html> < html> < title> SVG Stroke Example< /title> < body> < h1> SVG Stroke< /h1> < svg width="900" height="900"> < g> < text x="30" y="30" > Using stroke-dasharray: < /text> < path stroke-dasharray="5, 5" stroke-width="6" stroke="blue" d="M 50 50 L 300 50" /> < path stroke-dasharray="10, 10" stroke-width="6" stroke="orange" d="M 50 70 L 300 70" /> < path stroke-dasharray="20, 10, 5, 5, 5, 10" stroke-width="6" stroke="red" d="M 50 90 L 300 90" /> < /g> < /svg> < /body> < /html>

20)哪个SVG元素用于对SVG形状进行分组？ < g> 元素用于对SVG形状进行分组。
例：

< !DOCTYPE html> < html> < body> < svg xmlns="http://www.srcmini.org/2000/svg" xmlns:xlink="http://www.srcmini.org/1999/xlink"> < g> < line x1="10" y1="10" x2="90" y2="10" style="stroke:green; "/> < rect x="10" y="25" height="45" width="80" style="stroke: black; fill: red; stroke-width:2"/> < text x="10" y="100" style="stroke: blue; fill:orange"> Text grouped with shapes< /text> < /g> < /svg> < /body> < /html>

21)如何在HTML中添加SVG？使用以下任何标记在HTML中添加SVG：

使用< object> 标签
使用< embed> 标签
使用< iframe> 标签
使用< svg> 标签
使用< img> 标签等。

22)什么是SVG中的过滤器？ SVG的< filter> 元素用于定义过滤器。用于为SVG图形添加??特殊效果。 < filter> 元素使用id属性唯一地标识它。
例：

< !DOCTYPE html> < html> < body> < svg height="900" width="900"> < filter id="T2"> < feTurbulence baseFrequency=".06" type="fractalNoise"/> < /filter> < rect x="30" y="10" height="100" width="100" filter="url(#T2)"/> < /svg> < /body> < /html>

23)列出一些常用的SVG过滤器？一些常用过滤器的列表如下：

< feComposite>
< feColorMatrix>
< feMerge>
< FeComponentTranfer>
< feImage>
< feComposite>
< feOffset>
< feGaussianBlur> 等

24)哪个滤镜用于显示SVG中的模糊效果？ SVG < feGaussianBlur> 滤镜用于显示SVG中的模糊效果。
例：

< !DOCTYPE html> < html> < body> < h2> Blur effect< /h2> < svg height="250" width="250"> < filter id="p1" x="0" y="0"> < feGaussianBlur in="SourceGraphic" stdDeviation="15" /> < /filter> < rect width="120" height="120" stroke="green" stroke-width="3" fill="purple" filter="url(#p1)" /> < /svg> < /body> < /html>

25)SVG中的模式是什么？ SVG < pattern> 元素用于定义模式。它用于以平铺方式填充图形元素。
例：

< html> < title> SVG Pattern< /title> < body> < h1> SVG Pattern< /h1> < svg width="950" height="950"> < defs> < pattern id="pattern1" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100" viewBox="0 0 3 4" > < path d="M 0 0 L 3 0 L 1.5 3 z" fill="orange" stroke="green" /> < /pattern> < /defs> < g> < text x="30" y="40" > Triangle using the Pattern < /text> < rect x="100" y="100" width="300" height="300" stroke="orange" stroke-width="3" fill="url(#pattern1)" /> < /g> < /svg> < /body> < /html>

26)SVG中的梯度是什么？渐变定义为从一种颜色到另一种颜色的平滑过渡。
SVG梯度有两种类型：

线性渐变
径向渐变

27)什么是SVG线性梯度？线性渐变是从一种颜色到另一种颜色的过渡。 < linearGradient> 元素用于定义线性渐变。
例：

< !DOCTYPE html> < html> < body> < svg height="500" width="500"> < defs> < linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"> < stop offset="0%" style="stop-color:rgb(255, 255, 0); stop-opacity:1" /> < stop offset="50%" style="stop-color:rgb(255, 0, 0); stop-opacity:1" /> < /linearGradient> < /defs> < ellipse cx="250" cy="100" rx="120" ry="70" fill="url(#grad1)" /> < /svg> < /body> < /html>

28)什么是径向渐变？径向渐变是从一种颜色到另一种颜色的圆形过渡。 < radialGradient> 元素用于定义径向渐变。
例：

< !DOCTYPE html> < html> < body> < svg height="450" width="450"> < defs> < radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> < stop offset="0%" style="stop-color:rgb(255, 255, 255); stop-opacity:0" /> < stop offset="100%" style="stop-color:rgb(0, 0, 255); stop-opacity:1" /> < /radialGradient> < /defs> < ellipse cx="250" cy="100" rx="120" ry="70" fill="url(#grad1)" /> < /svg> < /body> < /html>

29)列出一些主要的互联网浏览器支持SVG吗？

Internet Explorer 9+
铬4+
Firefox 4+
Opera 9.5+
Safari 4+

30)哪个元素用于制作SVG图形的动画？ < animate> 元素用于对SVG图形进行动画处理。
例：

< !DOCTYPE html> < html> < title> SVG Animation< /title> < body> < svg xmlns="http://www.srcmini.org/2000/svg" xmlns:xlink="http://www.srcmini.org/1999/xlink"> < circle cx="70" cy="70" r="30" style="fill: purple; fill-opacity: .5; stroke:black; stroke-width: 1.5; "> < animate attributeName="r" attributeType="XML" from="30" to="50" begin="0s" dur="6s" fill="freeze" /> < /circle> < /svg> < /body> < /html>

31)是否可以根据用户的操作制作SVG图像？是!可以根据用户操作制作SVG图像。 SVG支持文档事件, 键盘事件和指针事件。
32)我们可以在SVG图像中编写JavaScript函数吗？是!我们可以在SVG图片中编写JavaScript函数。
33)哪个元素用于在SVG中创建链接？ < a> 元素用于在SVG中创建链接。 ” xlink：href” 属性用于指定链接文件的URL。
例：

< !DOCTYPE html> < html> < title> SVG Animation< /title> < body> < svg height="450" width="450"> < a xlink:href="https://www.srcmini.com/svg-tutorial"> < circle cx="50" cy="80" r="20" style="fill: red; "/> < rect x="90" y="60" width="40" height="40" style="fill: green; "/> < /a> < /svg> < /body> < /html>

34)根据特定路径使用哪个元素裁剪SVG形状？ < clipPath> 元素用于根据特定路径裁剪SVG形状。
例：

< !DOCTYPE html> < html> < body> < svg height="450" width="450"> < defs> < clipPath id="clip"> < rect x="15" y="15" width="40" height="40" /> < /clipPath> < /defs> < circle cx="25" cy="25" r="30" style="fill: #0000ff; clip-path: url(#clip); " /> < /svg> < /body> < /html>

35)什么是SVG遮罩？ SVG遮罩用于确定SVG形状的哪个部分可见以及具有什么透明度。 SVG < mask> 元素定义SVG掩码。
例：

< !DOCTYPE html> < html> < body> < svg height="450" width="450"> < defs> < mask id="mask1" x="0" y="0" width="100" height="100" > < rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/> < /mask> < /defs> < rect x="1" y="1" width="200" height="200" style="stroke: none; fill: #0000ff; mask: url(#mask1)"/> < /svg> < /body> < /html>

36)列举一些常用的SVG工具吗？一些常用的SVG工具如下：

墨迹
Adobe Illustrator的
阿帕奇蜡染布
捕捉
SVG编辑

37)使用哪个变换将坐标系旋转指定角度？ < rotate> 元素用于将坐标系旋转指定角度。
例：

< !DOCTYPE html> < html> < body> < svg width="200px" height="200px" viewBox="0 0 200 200"> < line x1="0" y1="0" x2="100" y2="0" style="stroke: black; stroke-width: 2"/> < line x1="0" y1="0" x2="0" y2="100" style="stroke: black; stroke-width: 2; "/> < rect x="70" y="30" width="20" height="20" style="fill: gray; "/> < rect x="70" y="30" width="20" height="20" transform="rotate(45)" style="fill: black; "/> < /svg> < /body> < /html>

38)如何在SVG中绘制圆？ SVG < circle> 标签用于绘制圆。以下属性用于绘制圆：
r：定义圆的半径。
cx：定义圆心的x坐标。
cy：定义圆心的y坐标。
例：

< circle cx="70" cy="70" r="40" stroke="red" stroke-width="3" fill="pink" >

39)如何在SVG中绘制矩形？ SVG < rect> 标签用于绘制矩形。以下属性用于绘制矩形：
x：定义矩形左上角的位置。
y：定义矩形右上角的位置。
width：定义矩形的宽度。
height：定义矩形的高度。
fill-opacity：用于定义填充颜色的不透明度。范围可以是0到1。
stroke-opacity：定义笔触颜色的不透明度。范围可以是0到1。
例：