SVG - 快速指南

SVG - 概述

什么是 SVG？

SVG（可扩展矢量图形）是一种基于 XML 的语言，用于定义基于矢量的图形。
SVG 旨在通过网络显示图像。
作为矢量图像，SVG 图像无论如何缩小或调整大小都不会损失质量。
SVG 图像支持交互性和动画。
SVG 是 W3C 标准。
其他图像格式（例如光栅图像）也可以与 SVG 图像结合在一起。
SVG 与 XSLT 和 HTML 的 DOM 很好地集成。

优点

使用任何文本编辑器创建和编辑 SVG 图像。
SVG 图像基于 XML，可搜索、可索引、可编写脚本和可压缩。
SVG 图像具有高度可扩展性，因为无论如何缩小或调整大小，它们都不会损失质量
任何分辨率下均具有良好的打印质量
SVG 是一个开放标准

缺点

与二进制格式的光栅图像相比，文本格式的大小更大。
即使对于小图像，尺寸也可以很大。

例子

以下 XML 片段可用于在 Web 浏览器中绘制一个圆圈。

<svg宽度=“100”高度=“100”>
   <circle cx =“50”cy =“50”r =“40”行程=“红色”行程宽度=“2”填充=“绿色”/>
</svg>

将 SVG XML 直接嵌入 HTML 页面中。

测试SVG.htm

<html>
   <title>SVG 图像</title>
   <正文>
   
      <h1>示例 SVG 图像</h1>
      
      <svg宽度=“100”高度=“100”>
         <circle cx =“50”cy =“50”r =“40”行程=“红色”行程宽度=“2”填充=“绿色”/>
      </svg>
   
   </正文>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。在 Internet Explorer 中，需要 activeX 控件才能查看 SVG 图像。

SVG 如何与 HTML 集成

<svg> 元素指示 SVG 图像的开始。
<svg> 元素的 width 和 height 属性定义 SVG 图像的高度和宽度。
在上面的示例中，我们使用 <circle> 元素来绘制圆形。
cx和cy属性代表圆心。默认值为 (0,0)。r属性代表圆的半径。
其他属性描边和描边宽度控制圆的轮廓。
fill 属性定义圆的填充颜色。
结束</svg>标签表示SVG图像的结束。

SVG - 形状

SVG 提供了许多可用于绘制图像的形状。以下是常见的形状。

先生。	形状类型和描述
1	直角用于绘制矩形。
2	圆圈用于画圆。
3	椭圆用于绘制椭圆。
4	线用于画线。
5	多边形用于绘制由相连的直线组成的闭合形状。
6	折线用于绘制由相连的直线组成的开放形状。
7	小路用于绘制任何路径。

SVG - 文本

<text> 元素用于绘制文本。

宣言

以下是<text>元素的语法声明。我们仅展示了主要属性。

<text
  x="x-cordinates"
  y="y-cordinates"
  
  dx="list of lengths"
  dy="list of lengths"
  
  rotate="list of numbers"
  textlength="length"
  lengthAdjust="spacing" >
</text>

属性

先生。	属性及描述
1	x - 字形的 x 轴坐标。
2	y - 字形的 y 轴坐标。
3	dx - 沿 x 轴移动。
4	dy - 沿 y 轴移动。
5	旋转- 应用于所有字形的旋转。
6	textlength - 文本的渲染长度。
7	lengthAdjust - 文本渲染长度的调整类型。

例子

测试SVG.htm

<html>
   <title>SVG Text</title>
   <body>
      
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
         </g> 
      </svg>
   
   </body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

带旋转的文本

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
            <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
            <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>
      
   </body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

多行文本

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="570" height="100">
         <g>
            <text x="30" y="12" >Multiline Text: </text>
            <text x="30" y="30" fill="rgb(121,0,121)">WWW.TutorialsPoint.COM
               <tspan x="30" y="50" font-weight="bold">Simply Easy learning.</tspan>
               <tspan x="30" y="70">We teach just for free.</tspan>
            </text>
         </g>
      </svg>
   </body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

超链接文本

<html>
   <title>SVG Text</title>
   <body>
      <h1>Sample SVG Text</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="10" >Text as Link: </text>
         
            <a xlink:href="http://www.tutorialspoint.com/svg/" target="_blank">
               <text font-family="Verdana" font-size="20"  x="30" y="30" 
               fill="rgb(121,0,121)">WWW.TutorialsPoint.COM</text>
            </a>
         </g>
      </svg>
      
   </body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

SVG - 描边

SVG 支持多种描边属性。

以下是使用的主要笔划属性。

先生。	笔画类型及描述
1	笔划- 定义任何元素的文本、线条或轮廓的颜色。
2	笔画宽度- 定义任何元素的文本、线条或轮廓的厚度。
3	Stroke-linecap - 定义任何路径的线条或轮廓的不同类型的结束。
4	Stroke-dasharray - 用于创建虚线。

例子

测试SVG.htm

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

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

笔划宽度

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

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

笔划线帽

<html>
   <title>SVG Stroke</title>
   <body>
      
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-linecap: </text>
         
            <path stroke-linecap="butt" stroke-width="6" 
            stroke="black" d="M 50 50 L 300 50" />
         
            <path stroke-linecap="round" stroke-width="6" 
            stroke="black" d="M 50 70 L 300 70" />
         
            <path stroke-linecap="square" stroke-width="6"
            stroke="black" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

笔划虚线数组

<html>
   <title>SVG Stroke</title>
   <body>
   
      <h1>Sample SVG Stroke</h1>
      
      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-dasharray: </text>
            
            <path stroke-dasharray="5,5" stroke-width="6" 
            stroke="black" d="M 50 50 L 300 50" />
            
            <path stroke-dasharray="10,10" stroke-width="6" 
            stroke="black" d="M 50 70 L 300 70" />
            
            <path stroke-dasharray="20,10,5,5,5,10" stroke-width="6" 
            stroke="black" d="M 50 90 L 300 90" />
         </g>
      </svg>
   
   </body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

SVG - 过滤器

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

SVG 提供了一组丰富的滤镜。以下是常用过滤器的列表。

混合型
fe颜色矩阵
fe组件传输
铁复合材料
fe卷积矩阵
fe漫射照明
fe位移贴图
洪水
高斯模糊
fe图像
费合并
形态学
feOffset - 阴影过滤器
fe镜面照明
菲莱
湍流
远光
菲点光
fe聚光灯

宣言

以下是<filter>元素的语法声明。我们仅展示了主要属性。

<过滤器
   filterUnits="定义滤镜效果区域的单位"
   PrimitiveUnits =“定义原始过滤器子区域的单位”
   
   x=“x轴坐标”
   y=“y轴坐标”     
   
   宽度=“长度”
   高度=“长度”
   
   filterRes=“过滤区域的数字”
   xlink:href="引用另一个过滤器" >
</过滤器>

属性

先生。	名称和描述
1	filterUnits - 定义滤镜效果区域的单位。它指定过滤器内各种长度值以及定义过滤器子区域的属性的坐标系。如果filterUnits =“userSpaceOnUse”，则值表示使用“filter”元素时当前用户坐标系中的值。如果filterUnits =“objectBoundingBox”，则值表示使用“filter”元素时引用元素上的边界框的分数或百分比值。默认为 userSpaceOnUse。
2	PrimitiveUnits - 定义滤镜效果区域的单位。它指定过滤器内各种长度值以及定义过滤器子区域的属性的坐标系。如果filterUnits =“userSpaceOnUse”，则值表示使用“filter”元素时当前用户坐标系中的值。如果filterUnits =“objectBoundingBox”，则值表示使用“filter”元素时引用元素上的边界框的分数或百分比值。默认为 userSpaceOnUse。
3	x - 过滤器边界框的 x 轴坐标。默认值为 0。
4	y - 过滤器边界框的 y 轴坐标。默认值为 0。
5	width - 过滤器边界框的宽度。默认值为 0。
6	height - 过滤器边界框的高度。默认值为 0。
7	filterRes - 表示过滤器区域的数字。
8	xlink:href - 用于引用另一个过滤器。

例子

测试SVG.htm

<html>
   <标题>SVG过滤器</标题>
   <正文>
   
      <h1>示例 SVG 过滤器</h1>
   
      <svg宽度=“800”高度=“800”>
      
         <定义>
            <过滤器id =“过滤器1”x =“0”y =“0”>
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </过滤器>
            
            <过滤器id =“filter2”x =“0”y =“0”宽度=“200％”高度=“200％”>
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="正常" />
            </过滤器>
         </defs>
         
         <g>
            <text x="30" y="50" >使用滤镜（模糊效果）：</text>
            <矩形x =“100”y =“100”宽度=“90”高度=“90”描边=“绿色”描边宽度=“3”
            填充=“绿色”过滤器=“url（#filter1）”/>      
         </g>
         
      </svg>
   
   </正文>
</html>

两个 <filter> 元素定义为filter1 和filter2。
feGaussianBlur 滤镜效果使用 stdDeviation 定义模糊效果和模糊量。
in="SourceGraphic" 定义该效果适用于整个元素。
feOffset 滤镜效果用于创建阴影效果。in="SourceAlpha" 定义该效果适用于 RGBA 图形的 alpha 部分。
<rect> 元素使用 filter 属性链接过滤器。

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

带阴影效果的滤镜

<html>
   <标题>SVG过滤器</标题>
   <正文>
      
      <h1>示例 SVG 过滤器</h1>
      
      <svg宽度=“800”高度=“800”>
      
         <定义>
            <过滤器id =“过滤器1”x =“0”y =“0”>
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </过滤器>
            
            <过滤器id =“filter2”x =“0”y =“0”宽度=“200％”高度=“200％”>
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="正常" />
            </过滤器>
         </defs>
         
         <g>
            <text x="30" y="50" >使用滤镜（阴影效果）：</text>
            <矩形x =“100”y =“100”宽度=“90”高度=“90”描边=“绿色”描边宽度=“3”
            填充=“绿色”过滤器=“url（#filter2）”/>
         </g>
         
      </svg>
   
   </正文>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

SVG - 模式

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

宣言

以下是<pattern>元素的语法声明。我们仅展示了主要属性。

<pattern
   patternUnits="units to define x,y, width and height attributes."
   patternContentUnits ="units to define co-ordinate system of contents of pattern"
   patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   preserveAspectRatio="to preserve width/height ratio of original content"
   xlink:href="reference to another pattern" >
</pattern>

属性

先生。	名称和描述
1	patternUnits - 定义图案效果区域的单位。它指定图案内各种长度值以及定义图案子区域的属性的坐标系。如果patternUnits =“userSpaceOnUse”，则值表示使用“pattern”元素时当前用户坐标系中的值。如果patternUnits =“objectBoundingBox”，则值表示使用“pattern”元素时引用元素上的边界框的分数或百分比值。默认为 userSpaceOnUse。
2	patternContentUnits - 定义模式内容区域的单位。它指定图案内各种长度值以及定义图案子区域的属性的坐标系。如果patternContentUnits =“userSpaceOnUse”，则值表示使用“pattern”元素时当前用户坐标系中的值。如果patternContentUnits =“objectBoundingBox”，则值表示使用“pattern”元素时引用元素上的边界框的分数或百分比值。默认为 userSpaceOnUse。
3	x - 图案边界框的 x 轴坐标。默认值为 0。
4	y - 图案边界框的 y 轴坐标。默认值为 0。
5	width - 图案边界框的宽度。默认值为 0。
6	height - 图案边界框的高度。默认值为 0。
7	keepAspectRatio - 保留原始内容的宽度/高度比。
8	xlink:href - 用于引用另一个模式。

例子

测试SVG.htm

<html>
   <title>SVG Pattern</title>
   <body>
      <h1>Sample SVG Pattern</h1>
      
      <svg width="800" height="800">
         
         <defs>
            <pattern id="pattern1" patternUnits="userSpaceOnUse"
               x="0" y="0" width="100" height="100"
               viewBox="0 0 4 4" >
               <path d="M 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" />
            </pattern> 
         </defs>
         
         <g>
            <text x="30" y="50" >Using Pattern (Triangles): </text>
            <rect x="100" y="100" width="300" height="300" stroke="green" 
            stroke-width="3" fill="url(#pattern1)" />
         </g> 
         
      </svg>
   
   </body>
</html>

一个<pattern> 元素定义为pattern1。
在模式中，定义了一个视图框并定义了用作模式的路径。
在 rect 元素的 fill 属性中，指定了模式的 url，以使用之前创建的模式填充矩形。

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

SVG - 渐变

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

线性渐变- 表示一种颜色从一个方向到另一个方向的线性过渡。
径向渐变- 表示从一个方向到另一个方向从一种颜色到另一种颜色的圆形过渡。

线性渐变

宣言

以下是<linearGradient>元素的语法声明。我们仅展示了主要属性。

<linearGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   x1="x-axis co-ordinate" 
   y1="y-axis co-ordinate"     
   x2="x-axis co-ordinate" 
   y2="y-axis co-ordinate"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</linearGradient>

属性

先生。	名称和描述
1	gradientUnits - 定义渐变内各种长度值的坐标系的单位。如果gradientUnits =“userSpaceOnUse”，则值表示使用渐变元素时当前用户坐标系中的值。如果patternContentUnits =“objectBoundingBox”，则值表示使用渐变元素时引用元素上的边界框的分数或百分比值。默认为 userSpaceOnUse。
2	x1 - 梯度向量的 x 轴坐标。默认值为 0。
3	y1 - 梯度向量的 y 轴坐标。默认值为 0。
4	x2 - 梯度向量的 x 轴坐标。默认值为 0。
5	y2 - 梯度向量的 y 轴坐标。默认值为 0。
6	spreadMethod - 指示在图形元素内传播渐变的方法。默认为“垫”。
7	xlink:href - 用于引用另一个渐变。

例子

测试SVG.htm

<html>
   <title>SVG Linear Gradient</title>
   <body>
   
      <h1>Sample SVG Linear Gradient</h1>
   
      <svg width="600" height="600">
      
         <defs>
            <linearGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </linearGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Linear Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3" 
            fill="url(#sampleGradient)" />
         </g>
         
      </svg>
   
   </body>
</html>

一个 <linearGradient> 元素定义为sampleGradient。
在 LinearGradient 中，两个偏移量由两种颜色定义。
在 rect 元素的 fill 属性中，指定渐变的 url，以使用之前创建的渐变填充矩形。

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

径向渐变

宣言

以下是<radialGradient>元素的语法声明。我们仅展示了主要属性。

<radialGradient
   gradientUnits ="units to define co-ordinate system of contents of gradient"
   gradientTransform = "definition of an additional transformation from the gradient coordinate system onto the target coordinate system"
   
   cx="x-axis co-ordinate of center of circle." 
   cy="y-axis co-ordinate of center of circle."     
   
   r="radius of circle" 
   
   fx="focal point for the radial gradient"     
   fy="focal point for the radial gradient"     
   
   spreadMethod="indicates method of spreading the gradient within graphics element"
   xlink:href="reference to another gradient" >
</radialGradient>

属性

先生。	名称和描述
1	gradientUnits - 定义渐变内各种长度值的坐标系的单位。如果gradientUnits =“userSpaceOnUse”，则值表示使用渐变元素时当前用户坐标系中的值。如果patternContentUnits =“objectBoundingBox”，则值表示使用渐变元素时引用元素上的边界框的分数或百分比值。默认为 userSpaceOnUse。
2	cx - 梯度向量最大圆中心的 x 轴坐标。默认值为 0。
3	cy - 梯度向量最大圆中心的 y 轴坐标。默认值为 0。
4	r - 梯度向量最大圆的中心半径。默认值为 0。
5	fx - 径向渐变的焦点。默认值为 0。
6	fy - 径向梯度的焦点。默认值为 0。
7	spreadMethod - 指示在图形元素内传播渐变的方法。默认为“垫”。
8	xlink:href - 用于引用另一个渐变。

例子

测试SVG.htm

<html>
   <title>SVG Radial Gradient</title>
   <body>
      
      <h1>Sample SVG Radial Gradient</h1>
      
      <svg width="600" height="600">
         <defs>
            <radialGradient id="sampleGradient">
               <stop offset="0%" stop-color="#FF0000" />
               <stop offset="100%" stop-color="#00FFF00" />
            </radialGradient>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Radial Gradient: </text>
            <rect x="100" y="100" width="200" height="200" stroke="green" stroke-width="3"
            fill="url(#sampleGradient)" />
         </g>
      </svg>
      
   </body>
</html>

一个<radialGradient> 元素定义为sampleGradient。
在 RadialGradient 中，两个偏移量由两种颜色定义。
在 rect 元素的 fill 属性中，指定渐变的 url，以使用之前创建的渐变填充矩形。

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

SVG-交互性

SVG 图像可以响应用户操作。SVG 支持指针事件、键盘事件和文档事件。考虑以下示例。

例子

测试SVG.htm

<html>
   <title>SVG Interactivity</title>
   <body>
      
      <h1>Sample Interactivity</h1>
      
      <svg width="600" height="600">
         <script type="text/JavaScript">
            <![CDATA[
               function showColor() {
                  alert("Color of the Rectangle is: "+
                  document.getElementById("rect1").getAttributeNS(null,"fill"));
               }
               
               function showArea(event){
                  var width = parseFloat(event.target.getAttributeNS(null,"width"));
                  var height = parseFloat(event.target.getAttributeNS(null,"height"));
                  alert("Area of the rectangle is: " +width +"x"+ height);
               }
               
               function showRootChildrenCount() {
                  alert("Total Children: "+document.documentElement.childNodes.length);
               }
            ]]>
         </script>
         
         <g>
            <text x="30" y="50" onClick="showColor()">Click me to show rectangle color.</text>
            
            <rect id="rect1" x="100" y="100" width="200" height="200" 
            stroke="green" stroke-width="3" fill="red" 
            onClick="showArea(event)"/>
            
            <text x="30" y="400" onClick="showRootChildrenCount()">
            Click me to print child node count.</text>
         </g>
      </svg>
   
   </body>
</html>

说明

SVG 支持 JavaScript/ECMAScript 函数。脚本块是在CDATA块中考虑XML中的字符数据支持。
SVG 元素支持鼠标事件、键盘事件。我们使用 onClick 事件来调用 javascript 函数。
在javascript函数中，document代表SVG文档，可用于获取SVG元素。
在 javascript 函数中，事件代表当前事件，可用于获取引发事件的目标元素。

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。单击每个文本和矩形即可查看结果。

SVG - 链接

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

宣言

以下是<a>元素的语法声明。我们仅展示了主要属性。

<a
   xlink:show = "new" | "replace"
   xlink:actuate = "onRequest"
   xlink:href = "<IRI>"
   target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" >
</a>

属性

先生。	名称和描述
1	xlink:show - 用于 XLink 感知处理器的文档目的。默认是新的。
2	xlink:actuate - 用于 XLink 感知处理器的文档目的。
3	xlink:href - 引用对象的位置。
4	target - 当结束资源的目标可能时使用。

例子

测试SVG.htm

<html>
   <title>SVG Linking</title>
   <body>
   
      <h1>Sample Link</h1>
      
      <svg width="800" height="800">
         <g>
            <a xlink:href="http://www.tutorialspoint.com"> 
               <text x="0" y="15" fill="black" >
               Click me to load TutorialsPoint DOT COM.</text>
            </a>
         </g> 
         
         <g>
            <text x="0" y="65" fill="black" >
            Click in the rectangle to load TutorialsPoint DOT COM</text>
            
            <a xlink:href="http://www.tutorialspoint.com"> 
               <rect x="100" y="80" width="300" height="100"
               style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" /> 
            </a>
         </g>
      </svg>
   
   </body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用Chrome/Firefox/Opera直接查看SVG图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。单击链接和矩形即可查看结果。

先生。	形状类型和描述
1	直角用于绘制矩形。
2	圆圈用于画圆。
3	椭圆用于绘制椭圆。
4	线用于画线。
5	多边形用于绘制由相连的直线组成的闭合形状。
6	折线用于绘制由相连的直线组成的开放形状。
7	小路用于绘制任何路径。