Skip to content
Related Articles

Related Articles

SVG stop-opacity Attribute
  • Last Updated : 30 Nov, 2020

The stop-opacity attribute indicates the alpha value or opacity to be used at the stop point. It has effect only on the <stop> element. The default value is 1.

Syntax:

stop-opacity = opacity-value

Attribute Values: The stop-opacity attribute accepts the values mentioned above and described below

  • opacity-value: It indicates a number between 0 and 1 or a percentage value.

Below examples illustrate the use of the stop-opacity attribute.

Example 1:



HTML




<!DOCTYPE html> 
<html
  
     <body
             <h1 style="color: green;">
              GeeksforGeeks
          </h1>
          <svg width="300" height="300"
               viewBox="0 0 100 100"
               <defs
                  <radialGradient id="gradient"
                      <stop offset="20%"
                       stop-color="gold"
                       stop-opacity="0.5"/> 
  
                      <stop offset="80%"
                       stop-color="rgb(0, 0, 100)"
                       stop-opacity="0.6"/> 
  
                      <stop offset="70%"
                       stop-color="rgb(100, 200, 0)"
                       stop-opacity="0.8"/> 
                  </radialGradient
               </defs
  
               <rect x="0" y="0" 
                    width="100%"
                    height="100%" 
                    fill="url(#gradient)"
                    style=" stroke: black;" /> 
  
               <rect x="15" y="15" 
                    width="70%"
                    height="70%" 
                    fill="url(#gradient)" /> 
  
               <text fill="white" 
                    font-size="10"
                    x="10" y="52">
                    GeeksForGeeks
               </text
          </svg
     </body
  
</html>

Output:

Example 2:

HTML




<!DOCTYPE html> 
<html
  
     <body
          <h1 style="color: green; 
              font-size: 25px;">
              GeeksforGeeks
          </h1>
          <svg height="200" width="200"
              <defs
                  <linearGradient id="gradient"
                     <stop offset="20%"
                      stop-color="rgb(20, 200, 0)"
                      stop-opacity="0.5"/> 
  
                     <stop offset="80%"
                      stop-color="rgb(200, 200, 0)"
                      stop-opacity="0.5"/> 
                  </linearGradient
               </defs
  
               <rect width="100%"
                    height="100%" 
                    fill="url(#gradient)"
                    style=" stroke: green;"/> 
  
               <rect x="30" y="30" 
                    width="70%"
                    height="70%" 
                    fill="url(#gradient)"/> 
  
               <text fill="Green" y="100"
                    font-size="25"
                    GeeksForGeeks 
               </text
          </svg
     </body
  
</html>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :