SVG 面试题

2025 年 3 月 16 日 | 9 分钟阅读

以下是关于 SVG 的一些常见面试题及答案列表

1) SVG 的全称是什么？

SVG 的全称是可缩放矢量图形（Scalable Vector Graphics）。

2) 什么是 SVG？

SVG 是一种基于 XML 的格式。它用于绘制二维矢量图像，并且由于是矢量图像，因此无论放大还是缩放 SVG 图像，它都不会损失质量。

3) 在 SVG 中，哪个标签用于绘制矩形？

在 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 中，哪个标签用于绘制线条？

在 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 中，哪个标签用于绘制圆形？

在 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 中，哪个标签用于绘制任何路径？

在 SVG 中，使用 `` 标签绘制任何路径。

示例

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

7) 在 SVG 中，哪个标签用于创建由连接直线组成的开放形状？

在 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 中，哪个标签用于创建由连接直线组成的闭合形状？

在 SVG 中，使用 `` 标签创建由连接直线组成的闭合形状。

9) 在 SVG 中，哪个标签用于绘制文本？

在 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.Tpointtech.COM</text>
         </g> 
      </svg>
   
   </body>
</html>

10) 路径元素中的哪个命令用于创建一条线？

使用 "L" 命令来创建一条线。

11) 在 SVG 中，路径元素的哪个命令用于关闭路径？

使用 "Z" 命令来关闭路径。

12) 路径元素的哪个命令用于将光标从一个点移动到另一个点？

路径元素的 "M" 命令用于将光标从一个点移动到另一个点。

13) 路径元素的哪个命令用于创建水平线？

路径元素的 "H" 命令用于创建水平线。

14) 路径元素的哪个命令用于创建垂直线？

路径元素的 "V" 命令用于创建垂直线。

15) 路径元素的哪个命令用于创建平滑曲线？

路径元素的 "S" 命令用于创建平滑曲线。

16) stroke 的哪个属性定义了文本、线条或元素的轮廓颜色？

在 SVG 中，`stroke` 属性定义了文本、线条或元素的轮廓颜色。

示例

<!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 的哪个属性定义了文本、线条或元素的轮廓粗细？

`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 的哪个属性定义了线条或任何路径轮廓的不同结束类型？

`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 的哪个属性用于创建虚线？

`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 形状进行分组？

使用 `` 元素对 SVG 形状进行分组。

示例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.Tpointtech.org/2000/svg"
    xmlns:xlink="http://www.Tpointtech.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：

使用 `

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

所有面试

公司面试