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.tw/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.tw"> 
               <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.tw"> 
               <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 影像渲染。點選連結和矩形以檢視結果。

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.