个性化阅读
专注于IT技术分析
        找回密码
当前位置：srcmini > SVG > 正文

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

2020-03-26 18:12:53 分类：SVG / 面试题 阅读(1684) 评论(0)

本文概述

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.srcmini02.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面试题和答案汇集
标签：

相关推荐

评论 抢沙发

评论前必须登录！

 

猜你喜欢

热门标签

网站开发 (2587)WordPress开发 (2055)WordPress主题 (1517)Web开发 (692)主题 (527)数据科学 (444)教程合集 (317)资源合集 (316)函数 (287)页面 (267)python开发 (261)项目示例 (243)WordPress自定义页面 (233)图像 (219)错误 (213)网站 (189)UX设计 (187)Web安全 (179)模板 (178)Web运维 (177)应用程序 (177)WordPress插件 (176)插件 (171)前端开发 (166)算法 (150)woocommerce (149)数据结构 (149)常见问题 (142)设计 (138)网红 (138)