个性化阅读
专注于IT技术分析

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

本文概述

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梯度有两种类型:

  1. 线性渐变
  2. 径向渐变

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。

例:

<rect
x="50" y="50" 
width="200" height="200" 
style="fill:red; 
stroke:black; 
stroke-width:5; 
fill-opacity:0.2; 
stroke-opacity:0.9" >

40)如何在SVG中绘制椭圆?

SVG <ellipse>标签用于绘制椭圆。以下属性用于绘制椭圆:

rx:定义水平半径。

ry:定义垂直半径。

cx:定义椭圆中心的x坐标。

cy:定义椭圆中心的y坐标。

例:

<ellipse 
cx="250" cy="100" 
rx="120" ry="70" 
style="fill:red;
stroke:black;
stroke-width:3" >

41)如何在SVG中绘制自由流动路径?

SVG <path>标签用于绘制路径。以下属性用于绘制椭圆:

d:它包含路径数据, 通常是诸如lineto, moveto等的一组命令。

例:

<path 
d="M250 10 L100 200 L400 200 Z">

HTML面试问题
SQL面试题
Android面试题
MySQL面试问题
Java OOP面试问题
休眠面试问题

SEO面试问题

PL / SQL面试问题

Oracle面试问题

SQL Server面试问题

Java基础面试问题

春季面试问题

赞(0) 打赏
未经允许不得转载:srcmini » 面试宝典!SVG面试题和答案汇集
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏