SVG 快速指南

上一页
下一页

SVG - 概述

什么是 SVG？

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

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

  • 作为矢量图像，SVG 图像无论如何缩放或调整大小都不会损失质量。

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

  • SVG 是 W3C 标准。

  • 其他图像格式（如光栅图像）也可以与 SVG 图像组合。

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

优势

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

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

  • SVG 图像具有高度可扩展性，因为无论如何缩放或调整大小都不会损失质量

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

  • SVG 是开放标准

劣势

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

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

示例

以下 XML 代码片段可用于在 Web 浏览器中绘制圆形。

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
</svg>

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

testSVG.htm

<html>
   <title>SVG Image</title>
   <body>
   
      <h1>Sample SVG Image</h1>
      
      <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="red" stroke-width="2" fill="green" />
      </svg>
   
   </body>
</html>

输出

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

SVG 如何与 HTML 集成

  • <svg> 元素表示 SVG 图像的开始。

  • <svg> 元素的 width 和 height 属性定义 SVG 图像的高度和宽度。

  • 在上面的示例中，我们使用了 <circle> 元素来绘制圆形。

  • cx 和 cy 属性表示圆形的中心。默认值为 (0,0)。r 属性表示圆形的半径。

  • 其他属性 stroke 和 stroke-width 控制圆形的轮廓。

  • fill 属性定义圆形的填充颜色。

  • 结束 </svg> 标签表示 SVG 图像的结束。

SVG - 形状

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

序号 形状类型和描述
1 rect

用于绘制矩形。
2 circle

用于绘制圆形。
3 ellipse

用于绘制椭圆形。
4 line

用于绘制直线。
5 polygon

用于绘制由连接的直线组成的封闭形状。
6 polyline

用于绘制由连接的直线组成的开放形状。
7 path

用于绘制任何路径。

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 rotate − 应用于所有字形的旋转。
6 textlength − 文本的渲染长度。
7 lengthAdjust − 文本渲染长度的调整类型。

示例

testSVG.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 浏览器中打开 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 浏览器中打开 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 浏览器中打开 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="https://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 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本也支持 SVG 图像渲染。

SVG - 描边

SVG 支持多个描边属性。

以下是使用的主要描边属性。

序号 描边类型和描述
1 stroke − 定义文本、线条或任何元素轮廓的颜色。
2 stroke-width − 定义文本、线条或任何元素轮廓的粗细。
3 stroke-linecap − 定义线条或任何路径轮廓的不同类型的端点。
4 stroke-dasharray − 用于创建虚线。

示例

testSVG.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 浏览器中打开 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 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本也支持 SVG 图像渲染。

stroke-linecap

<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 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本也支持 SVG 图像渲染。

stroke-dasharray

<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 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本也支持 SVG 图像渲染。

SVG - 滤镜

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

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

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset - 用于投影的滤镜
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight

声明

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

<filter
   filterUnits="units to define filter effect region"
   primitiveUnits="units to define primitive filter subregion"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   filterRes="numbers for filter region"
   xlink:href="reference to another filter" >
</filter>

属性

序号 名称和描述
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 − 用于引用另一个滤镜。

示例

testSVG.htm 
<html>
   <title>SVG Filter</title>
   <body>
   
      <h1>Sample SVG Filter</h1>
   
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Blur Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter1)" />      
         </g> 
         
      </svg>
   
   </body>
</html>

  • 两个 <filter> 元素定义为 filter1 和 filter2。

  • feGaussianBlur 滤镜效果使用 stdDeviation 定义模糊效果和模糊量。

  • in="SourceGraphic" 定义效果适用于整个元素。

  • feOffset 滤镜效果用于创建阴影效果。in="SourceAlpha" 定义效果适用于 RGBA 图形的 alpha 部分。

  • <rect> 元素使用 filter 属性链接滤镜。

输出

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

带阴影效果的滤镜

<html>
   <title>SVG Filter</title>
   <body>
      
      <h1>Sample SVG Filter</h1>
      
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Shadow Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter2)" />
         </g>
         
      </svg>
   
   </body>
</html>

输出

在 Chrome 浏览器中打开 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 preserveAspectRatio - 保留原始内容的宽高比。
8 xlink:href − 用于引用另一个图案。

示例

testSVG.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 浏览器中打开 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 − 指示在图形元素内扩展渐变的方法。默认为 'pad'。
7 xlink:href − 用于引用另一个渐变。

示例

testSVG.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 浏览器中打开 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 − 径向渐变的焦点在 x 轴上的坐标。默认值为 0。
6 fy − 径向渐变的焦点在 y 轴上的坐标。默认值为 0。
7 spreadMethod − 指示在图形元素内扩展渐变的方法。默认为 'pad'。
8 xlink:href − 用于引用另一个渐变。

示例

testSVG.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 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本也支持 SVG 图像渲染。

SVG - 交互性

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

示例

testSVG.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 函数中，event 代表当前事件，可用于获取引发事件的目标元素。

输出

在 Chrome 浏览器中打开 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 识别处理器文档的目的。默认值为 new。
2 xlink:actuate − 为了 XLink 识别处理器文档的目的。
3 xlink:href − 引用的对象的地址。
4 target − 当目标资源的结束位置可能时使用。

示例

testSVG.htm 
<html>
   <title>SVG Linking</title>
   <body>
   
      <h1>Sample Link</h1>
      
      <svg width="800" height="800">
         <g>
            <a xlink:href="https://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="https://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 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本也支持 SVG 图像渲染。点击链接和矩形以查看结果。

打印页面
上一页
下一页
广告