SVG - Gradients

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

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.

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