SVG - Hướng dẫn nhanh

SVG là gì?

SVG, Scalable Vector Graphics là một ngôn ngữ dựa trên XML để xác định đồ họa dựa trên vector.
SVG nhằm mục đích hiển thị hình ảnh trên web.
Là hình ảnh vectơ, hình ảnh SVG không bao giờ giảm chất lượng cho dù chúng được thu nhỏ hoặc thay đổi kích thước như thế nào.
Hình ảnh SVG hỗ trợ tương tác và hoạt ảnh.
SVG là một tiêu chuẩn W3C.
Các định dạng hình ảnh khác như hình ảnh raster cũng có thể được xếp chung với hình ảnh SVG.
SVG tích hợp tốt với XSLT và DOM của HTML.

Ưu điểm

Sử dụng bất kỳ trình soạn thảo văn bản nào để tạo và chỉnh sửa hình ảnh SVG.
Dựa trên XML, hình ảnh SVG có thể tìm kiếm, có thể lập chỉ mục và có thể được tập lệnh và nén.
Hình ảnh SVG có khả năng mở rộng cao vì chúng không bao giờ giảm chất lượng cho dù chúng được thu nhỏ hoặc thay đổi kích thước như thế nào
Chất lượng in tốt ở mọi độ phân giải
SVG là một tiêu chuẩn mở

Nhược điểm

Kích thước định dạng văn bản sẽ lớn hơn so với hình ảnh raster được định dạng nhị phân.
Kích thước có thể lớn ngay cả đối với hình ảnh nhỏ.

Thí dụ

Đoạn mã XML sau có thể được sử dụng để vẽ một vòng tròn trong trình duyệt web.

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

Nhúng SVG XML trực tiếp vào trang 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>

Đầu ra

Mở textSVG.htm trong trình duyệt web Chrome. Bạn có thể sử dụng Chrome / Firefox / Opera để xem trực tiếp hình ảnh SVG mà không cần bất kỳ plugin nào. Trong Internet Explorer, điều khiển activeX được yêu cầu để xem ảnh SVG.

Cách SVG tích hợp với HTML

Phần tử <svg> cho biết phần bắt đầu của ảnh SVG.
Các thuộc tính chiều rộng và chiều cao của phần tử <svg> xác định chiều cao và chiều rộng của hình ảnh SVG.
Trong ví dụ trên, chúng tôi đã sử dụng phần tử <circle> để vẽ một hình tròn.
cx và thuộc tính cy đại diện cho tâm của vòng tròn. Giá trị mặc định là (0,0). thuộc tính r đại diện cho bán kính của hình tròn.
Các thuộc tính khác thì stroke và stroke-width điều khiển đường viền của hình tròn.
thuộc tính fill xác định màu tô của hình tròn.
Thẻ đóng </svg> cho biết phần cuối của hình ảnh SVG.

SVG cung cấp một số hình dạng có thể được sử dụng để vẽ hình ảnh. Sau đây là các hình dạng phổ biến.

Sr.No.	Loại & Mô tả Hình dạng
1	trực tràng Dùng để vẽ hình chữ nhật.
2	vòng tròn Dùng để vẽ hình tròn.
3	hình elip Được sử dụng để vẽ một hình elip.
4	hàng Dùng để vẽ một đoạn thẳng.
5	đa giác Dùng để vẽ một hình khép kín bao gồm các đoạn thẳng nối với nhau.
6	polyline Dùng để vẽ một hình mở bao gồm các đoạn thẳng nối với nhau.
7	con đường Dùng để vẽ bất kỳ đường dẫn nào.

Phần tử <text> được sử dụng để vẽ văn bản.

Tờ khai

Sau đây là khai báo cú pháp của <text>thành phần. Chúng tôi chỉ hiển thị các thuộc tính chính.

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

Thuộc tính

Sr.No.	Thuộc tính & Mô tả
1	x - tọa độ trục x của glyph.
2	y - tọa độ trục y của glyph.
3	dx - dịch chuyển theo trục x.
4	dy - dịch chuyển theo trục y.
5	rotate - xoay được áp dụng cho tất cả các glyph.
6	textlength - độ dài kết xuất của văn bản.
7	lengthAdjust - loại điều chỉnh với độ dài hiển thị của văn bản.

Thí dụ

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>

Đầu ra

Mở textSVG.htm trong trình duyệt web Chrome. Bạn có thể sử dụng Chrome / Firefox / Opera để xem trực tiếp hình ảnh SVG mà không cần bất kỳ plugin nào. Internet Explorer 9 trở lên cũng hỗ trợ kết xuất hình ảnh SVG.

Văn bản có xoay

<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>

Đầu ra

Văn bản nhiều dòng

<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>

Đầu ra

Văn bản siêu liên kết

<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>

Đầu ra

SVG hỗ trợ nhiều thuộc tính đột quỵ.

Sau đây là các thuộc tính chính của nét vẽ được sử dụng.

Sr.No.	Loại đột quỵ & Mô tả
1	stroke - xác định màu của văn bản, dòng hoặc đường viền của bất kỳ phần tử nào.
2	stroke-width - xác định độ dày của văn bản, dòng hoặc đường viền của bất kỳ phần tử nào.
3	stroke-linecap - xác định các kiểu kết thúc khác nhau của một dòng hoặc phác thảo của bất kỳ đường dẫn nào.
4	stroke-dasharray - dùng để tạo đường đứt nét.

Thí dụ

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>

Đầu ra

Chiều rộng đột quỵ

<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>

Đầu ra

nét vẽ

<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>

Đầu ra

đột quỵ-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>

Đầu ra

SVG sử dụng phần tử <filter> để xác định bộ lọc. Phần tử <filter> sử dụng một thuộc tính id để nhận dạng duy nhất nó. Các bộ lọc được xác định trong các phần tử <def> và sau đó được tham chiếu đến các phần tử đồ họa bằng id của chúng.

SVG cung cấp một bộ lọc phong phú. Sau đây là danh sách các bộ lọc thường được sử dụng.

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset - bộ lọc cho bóng đổ
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Tờ khai

Sau đây là khai báo cú pháp của <filter>thành phần. Chúng tôi chỉ hiển thị các thuộc tính chính.

<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>

Thuộc tính

Sr.No.	Tên & Mô tả
1	filterUnits- đơn vị để xác định vùng hiệu ứng bộ lọc. Nó chỉ định hệ tọa độ cho các giá trị độ dài khác nhau trong bộ lọc và cho các thuộc tính xác định tiểu vùng bộ lọc. Nếu filterUnits = "userSpaceOnUse", các giá trị đại diện cho các giá trị trong hệ tọa độ người dùng hiện tại tại thời điểm khi phần tử 'filter' được sử dụng. Nếu filterUnits = "objectBoundsBox", các giá trị đại diện cho các giá trị ở dạng phân số hoặc tỷ lệ phần trăm của hộp giới hạn trên phần tử tham chiếu tại vị trí khi phần tử 'filter' được sử dụng. Mặc định là userSpaceOnUse.
2	primitiveUnits- đơn vị để xác định vùng hiệu ứng bộ lọc. Nó chỉ định hệ tọa độ cho các giá trị độ dài khác nhau trong bộ lọc và cho các thuộc tính xác định tiểu vùng bộ lọc. Nếu filterUnits = "userSpaceOnUse", các giá trị đại diện cho các giá trị trong hệ tọa độ người dùng hiện tại tại thời điểm khi phần tử 'filter' được sử dụng. Nếu filterUnits = "objectBoundsBox", các giá trị đại diện cho các giá trị ở dạng phân số hoặc tỷ lệ phần trăm của hộp giới hạn trên phần tử tham chiếu tại vị trí khi phần tử 'filter' được sử dụng. Mặc định là userSpaceOnUse.
3	x- tọa độ trục x của hộp giới hạn bộ lọc. Defeault là 0.
4	y- tọa độ trục y của hộp giới hạn bộ lọc. Mặc định là 0.
5	width- chiều rộng của hộp giới hạn bộ lọc. Mặc định là 0.
6	height- chiều cao của hộp giới hạn bộ lọc. Mặc định là 0.
7	filterRes - số đại diện cho các vùng lọc.
số 8	xlink:href - được sử dụng để tham chiếu đến một bộ lọc khác.

Thí dụ

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>

Hai phần tử <filter> được xác định là filter1 và filter2.
Hiệu ứng bộ lọc feGaussianBlur xác định hiệu ứng mờ với lượng mờ bằng cách sử dụng stdDeversion.
in = "SourceGraphic" xác định rằng hiệu ứng có thể áp dụng cho toàn bộ phần tử.
Hiệu ứng bộ lọc feOffset được sử dụng để tạo hiệu ứng đổ bóng. in = "SourceAlpha" xác định rằng hiệu ứng có thể áp dụng cho phần alpha của đồ họa RGBA.
Các phần tử <rect> đã liên kết các bộ lọc bằng thuộc tính filter.

Đầu ra

Bộ lọc với hiệu ứng Shadow

<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>

Đầu ra

SVG sử dụng phần tử <pattern> để xác định các mẫu. Các mẫu được xác định bằng cách sử dụng phần tử <pattern> và được sử dụng để lấp đầy các phần tử đồ họa theo kiểu lát gạch.

Tờ khai

Sau đây là khai báo cú pháp của <pattern>thành phần. Chúng tôi chỉ hiển thị các thuộc tính chính.

<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>

Thuộc tính

Sr.No.	Tên & Mô tả
1	patternUnits- đơn vị để xác định vùng hiệu ứng mẫu. Nó chỉ định hệ tọa độ cho các giá trị độ dài khác nhau trong mẫu và cho các thuộc tính xác định tiểu vùng mẫu. Nếu patternUnits = "userSpaceOnUse", các giá trị đại diện cho các giá trị trong hệ tọa độ người dùng hiện tại tại vị trí khi phần tử 'pattern' được sử dụng. Nếu patternUnits = "objectBoundsBox", các giá trị đại diện cho các giá trị ở dạng phân số hoặc phần trăm của hộp giới hạn trên phần tử tham chiếu tại vị trí khi phần tử 'pattern' được sử dụng. Mặc định là userSpaceOnUse.
2	patternContentUnits- đơn vị xác định vùng nội dung mẫu. Nó chỉ định hệ tọa độ cho các giá trị độ dài khác nhau trong mẫu và cho các thuộc tính xác định tiểu vùng mẫu. Nếu patternContentUnits = "userSpaceOnUse", các giá trị đại diện cho các giá trị trong hệ tọa độ người dùng hiện tại tại thời điểm khi phần tử 'pattern' được sử dụng. Nếu patternContentUnits = "objectBoundsBox", các giá trị đại diện cho các giá trị ở dạng phân số hoặc phần trăm của hộp giới hạn trên phần tử tham chiếu tại vị trí khi phần tử 'pattern' được sử dụng. Mặc định là userSpaceOnUse.
3	x- tọa độ trục x của hộp giới hạn mẫu. Defeault là 0.
4	y- tọa độ trục y của hộp giới hạn mẫu. Mặc định là 0.
5	width- chiều rộng của hộp viền mẫu. Mặc định là 0.
6	height- chiều cao của hộp viền hoa văn. Mặc định là 0.
7	preserveAspectRatio - để duy trì tỷ lệ chiều rộng / chiều cao của nội dung gốc.
số 8	xlink:href - được sử dụng để chỉ một mẫu khác.

Thí dụ

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>

Một phần tử <pattern> được xác định là pattern1.
Trong mẫu, một hộp xem được xác định và một đường dẫn sẽ được sử dụng làm mẫu được xác định.
trong phần tử trực tràng, trong thuộc tính điền, url của mẫu được chỉ định để lấp đầy hình chữ nhật với mẫu đã tạo trước đó.

Đầu ra

Gradient đề cập đến sự chuyển đổi mượt mà của một màu này sang màu khác trong một hình dạng. SVG cung cấp hai loại gradient.

Linear Gradients - Đại diện cho sự chuyển đổi tuyến tính của một màu này sang màu khác từ hướng này sang hướng khác.
Radial Gradients - Đại diện cho sự chuyển đổi vòng tròn của màu này sang màu khác từ hướng này sang hướng khác.

Gradients tuyến tính

Tờ khai

Sau đây là khai báo cú pháp của <linearGradient>thành phần. Chúng tôi chỉ hiển thị các thuộc tính chính.

<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>

Thuộc tính

Sr.No.	Tên & Mô tả
1	gradientUnits- đơn vị để xác định hệ tọa độ cho các giá trị độ dài khác nhau trong gradient. Nếu gradientUnits = "userSpaceOnUse", các giá trị đại diện cho các giá trị trong hệ tọa độ người dùng hiện tại tại thời điểm khi phần tử gradient được sử dụng. Nếu patternContentUnits = "objectBoundsBox", các giá trị đại diện cho các giá trị ở dạng phân số hoặc tỷ lệ phần trăm của hộp giới hạn trên phần tử tham chiếu tại vị trí khi phần tử gradient được sử dụng. Mặc định là userSpaceOnUse.
2	x1- Tọa độ trục x của vectơ gradient. Defeault là 0.
3	y1- tọa độ trục y của vectơ gradient. Mặc định là 0.
4	x2- Tọa độ trục x của vectơ gradient. Defeault là 0.
5	y2- tọa độ trục y của vectơ gradient. Mặc định là 0.
6	spreadMethod- chỉ ra phương pháp lan truyền gradient trong phần tử đồ họa. Mặc định là 'pad'.
7	xlink:href - được sử dụng để chỉ một gradient khác.

Thí dụ

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>

Một phần tử <linearGradient> được xác định là sampleGradient.
Trong linearGradient, hai hiệu số được xác định bằng hai màu.
trong phần tử trực tràng, trong thuộc tính điền, url của gradient được chỉ định để lấp đầy hình chữ nhật với gradient đã tạo trước đó.

Đầu ra

Radial Gradients

Tờ khai

Sau đây là khai báo cú pháp của <radialGradient>thành phần. Chúng tôi chỉ hiển thị các thuộc tính chính.

<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>

Thuộc tính

Sr.No.	Tên & Mô tả
1	gradientUnits- đơn vị để xác định hệ tọa độ cho các giá trị độ dài khác nhau trong gradient. Nếu gradientUnits = "userSpaceOnUse", các giá trị đại diện cho các giá trị trong hệ tọa độ người dùng hiện tại tại thời điểm khi phần tử gradient được sử dụng. Nếu patternContentUnits = "objectBoundsBox", các giá trị đại diện cho các giá trị ở dạng phân số hoặc tỷ lệ phần trăm của hộp giới hạn trên phần tử tham chiếu tại vị trí khi phần tử gradient được sử dụng. Mặc định là userSpaceOnUse.
2	cx- Tọa độ trục x của tâm đường tròn lớn nhất của vectơ gradient. Defeault là 0.
3	cy- tọa độ trục y của tâm đường tròn lớn nhất của vectơ gradient. Mặc định là 0.
4	r- bán kính của tâm đường tròn lớn nhất của vector gradient. Defeault là 0.
5	fx- tiêu điểm của gradient xuyên tâm. Mặc định là 0.
6	fy- tiêu điểm của gradient xuyên tâm. Mặc định là 0.
7	spreadMethod- chỉ ra phương pháp lan truyền gradient trong phần tử đồ họa. Mặc định là 'pad'.
số 8	xlink:href - được sử dụng để chỉ một gradient khác.

Thí dụ

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>

Một phần tử <radialGradient> được xác định là sampleGradient.
Trong radialGradient, hai hiệu số được xác định bằng hai màu.
trong phần tử trực tràng, trong thuộc tính điền, url của gradient được chỉ định để lấp đầy hình chữ nhật với gradient đã tạo trước đó.

Đầu ra

Hình ảnh SVG có thể được thực hiện đáp ứng các hành động của người dùng. SVG hỗ trợ sự kiện con trỏ, sự kiện bàn phím và sự kiện tài liệu. Hãy xem xét ví dụ sau.

Thí dụ

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>

Giải thích

SVG hỗ trợ các hàm JavaScript / ECMAScript. Khối tập lệnh nằm trong khối CDATA hãy xem xét hỗ trợ dữ liệu ký tự trong XML.
Phần tử SVG hỗ trợ sự kiện chuột, sự kiện bàn phím. Chúng tôi đã sử dụng sự kiện onClick để gọi một hàm javascript.
Trong các hàm javascript, document đại diện cho tài liệu SVG và có thể được sử dụng để lấy các phần tử SVG.
Trong các hàm javascript, sự kiện đại diện cho sự kiện hiện tại và có thể được sử dụng để lấy phần tử đích mà sự kiện đã được nêu ra.

Đầu ra

Phần tử <a> được sử dụng để tạo siêu liên kết. Thuộc tính "xlink: href" được sử dụng để chuyển IRI (Mã định danh tài nguyên quốc tế hóa) bổ sung cho URI (Định danh tài nguyên đồng nhất).

Tờ khai

Sau đây là khai báo cú pháp của <a>thành phần. Chúng tôi chỉ hiển thị các thuộc tính chính.

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

Thuộc tính

Sr.No.	Tên & Mô tả
1	xlink:show- cho mục đích tài liệu cho các bộ xử lý nhận biết XLink. Mặc định là mới.
2	xlink:actuate - cho mục đích tài liệu cho các bộ xử lý nhận biết XLink.
3	xlink:href - vị trí của đối tượng được tham chiếu.
4	target - được sử dụng khi các mục tiêu cho tài nguyên kết thúc là có thể.

Thí dụ

testSVG.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>

Đầu ra