SVG - 面试问题

SVG 代表可缩放矢量图形。

SVG 是一种基于 XML 的格式，用于绘制矢量图像。它用于绘制二维矢量图像。

以下是 SVG 的核心特性：

• SVG，可缩放矢量图形，是一种基于 XML 的语言，用于定义基于矢量的图形。

• SVG 用于在 Web 上显示图像。

• 作为矢量图像，SVG 图像无论放大或缩小多少次都不会损失质量。

• SVG 图像支持交互性和动画。

• SVG 是 W3C 标准。

• 其他图像格式，如光栅图像，也可以与 SVG 图像结合使用。

• SVG 与 HTML 的 XSLT 和 DOM 集成良好。

以下是使用 SVG 图像的优势：

• 使用任何文本编辑器创建和编辑 SVG 图像。

• 基于 XML，SVG 图像可搜索、可索引、可编写脚本和可压缩。

• SVG 图像具有高度的可扩展性，因为无论放大或缩小多少次都不会损失质量。

• 任何分辨率下都具有良好的打印质量。

• SVG 是一个开放标准。

以下是使用 SVG 图像的缺点：

• 作为文本格式，其大小比二进制格式的光栅图像更大。

• 即使对于小图像，大小也可能很大。

SVG 的“rect”标签用于绘制矩形。

SVG 的“circle”标签用于绘制圆形。

SVG 的“ellipse”标签用于绘制椭圆。

SVG 的“line”标签用于绘制直线。

SVG 的“polygon”标签用于绘制由连接的直线组成的封闭形状。

SVG 的“polyline”标签用于绘制由连接的直线组成的开放形状。

SVG 的“path”标签用于绘制任何路径。

SVG 的“text”标签用于绘制文本。

SVG 文本标签的“x”属性表示字形的 x 轴坐标。

SVG 文本标签的“y”属性表示字形的 y 轴坐标。

SVG 文本标签的“dx”属性表示沿 x 轴的偏移量。

SVG 文本标签的“dy”属性表示沿 y 轴的偏移量。

SVG 文本标签的“rotation”属性设置要应用于所有字形的旋转。

SVG 文本标签的“textLength”属性设置文本的渲染长度。

“stroke”属性定义文本、线条或任何元素轮廓的颜色。

“strokeWidth”属性定义文本、线条或任何元素轮廓的粗细。

“strokeLinecap”属性定义线条或任何路径轮廓的不同类型的结尾。

“strokeDasharray”属性用于创建虚线。

SVG 使用<filter>元素来定义滤镜。<filter>元素使用id属性来唯一标识它。滤镜在<def>元素中定义，然后通过图形元素的id引用它们。

SVG 提供了一套丰富的滤镜。以下是常用滤镜的列表：

• feBlend

• feColorMatrix

• feComponentTransfer

• feComposite

• feConvolveMatrix

• feDiffuseLighting

• feDisplacementMap

SVG 使用<pattern>元素来定义图案。图案使用<pattern>元素定义，并用于以平铺方式填充图形元素。

渐变是指形状内一种颜色到另一种颜色的平滑过渡。SVG 提供两种类型的渐变：

• 线性渐变

• 径向渐变

线性渐变表示从一个方向到另一个方向的一种颜色到另一种颜色的线性过渡。它使用<linearGradient>元素定义。

径向渐变表示从一个方向到另一个方向的一种颜色到另一种颜色的圆形过渡。它使用<radialGradient>元素定义。

是的！SVG 图像可以对用户操作做出响应。SVG 支持指针事件、键盘事件和文档事件。

是的！SVG 支持 JavaScript/ECMAScript 函数。脚本块必须位于 CDATA 块中，以考虑 XML 中的字符数据支持。

是的！SVG 元素支持鼠标事件和键盘事件。我们使用 onClick 事件来调用 JavaScript 函数。

在 JavaScript 函数中，document 表示 SVG 文档，可用于获取 SVG 元素。

在 JavaScript 函数中，event 表示当前事件，可用于获取触发事件的目标元素。

<a>元素用于创建超链接。“xlink:href”属性用于传递 IRI（国际化资源标识符），它是 URI（统一资源标识符）的补充。

SVG 图像可以通过以下方式嵌入：

• 使用 embed 标签

• 使用 object 标签

• 使用 iframe

SVG 的“rect”标签用于绘制矩形。以下是常用属性：

• x - 矩形左上角的 x 轴坐标。默认为 0。

• y - 矩形左上角的 y 轴坐标。默认为 0。

• width - 矩形的宽度。

• height - 矩形的高度。

• rx - 用于圆角矩形的圆角。

• ry - 用于圆角矩形的圆角。

示例：

<rect 
x = "100" y = "30" 
width = "300" height = "100" 
style = "fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" >

SVG 的“circle”标签用于绘制圆形。以下是常用属性：

• cx - 圆心在 x 轴上的坐标。默认为 0。

• cy - 圆心在 y 轴上的坐标。默认为 0。

• r - 圆的半径。

示例：

<circle 
cx = "100" cy = "100" r = "50" 
stroke = "black" 
stroke-width = "3" 
fill = "rgb(121,0,121)" >

SVG 的“ellipse”标签用于绘制椭圆。以下是常用属性：

• cx - 椭圆中心在 x 轴上的坐标。默认为 0。

• cy - 椭圆中心在 y 轴上的坐标。默认为 0。

• rx - 椭圆的 x 轴半径。

• ry - 椭圆的 y 轴半径。

示例：

<ellipse 
cx = "100" cy = "100" 
rx = "90" ry = "50" 
stroke = "black" 
stroke-width = "3" 
fill = "rgb(121,0,121)">

SVG 的“line”标签用于绘制直线。以下是常用属性：

• x1 - 起点的 x 轴坐标。默认为 0。

• y1 - 起点的 y 轴坐标。默认为 0。

• x2 - 终点的 x 轴坐标。默认为 0。

• y2 - 终点的 y 轴坐标。默认为 0。

示例：

<line 
x1 = "20" y1 = "20" 
x2 = "150" y2 = "150" 
stroke = "black" 
stroke-width = "3" 
fill = "rgb(121,0,121)">

SVG 的“polygon”标签用于绘制多边形。以下是常用属性：

points - 构成多边形的点的列表。

示例：

<polygon 
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5" 
stroke = "black" 
stroke-width = "3" 
fill = "rgb(121,0,121)">

SVG 的“polyline”标签用于绘制开放的多边形。以下是常用属性：

points - 构成多边形的点的列表。

示例：

<polyline 
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5" 
stroke = "black" 
stroke-width = "3" 
fill = "none">

SVG 的“path”标签用于绘制自由流动的路径。以下是常用属性：

d - 路径数据，通常是一组命令，如 moveto、lineto 等。

示例：

<path 
d = "M 100 100 L 300 100 L 200 300 z" 
stroke = "black" 
stroke-width = "3" 
fill = "rgb(121,0,121)">

path 元素的 M 命令将光标从一个点移动到另一个点。

path 元素的 L 命令创建直线。

path 元素的 H 命令创建水平线。

path 元素的 V 命令创建垂直线。

path 元素的 C 命令创建曲线。

path 元素的 S 命令创建平滑曲线。

path 元素的 Q 命令创建二次贝塞尔曲线。

path 元素的 T 命令创建平滑二次贝塞尔曲线。

路径元素的一个命令创建了一个椭圆弧。

路径元素的Z命令关闭路径。

当命令是大写时，表示绝对路径。如果使用小写命令，则使用相对路径。