How to Apply Linear Gradients to SVG Rect Elements Using CSS?

Applying Linear Gradients to SVG Rect Elements Using CSS

In the pursuit of enhancing visuals, developers often seek to apply linear gradients to SVG rect elements. This question delves into the technique of utilizing CSS to achieve such gradients.

CSS Approach

To apply a linear gradient to an SVG rect element via CSS, leverage the fill attribute as you would in the fill attribute of any other element. It is essential to define the linear gradient within the SVG itself.

Consider this example:

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}</code>

<code class="html"><svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <style type="text/css">
        rect{fill:url(#MyGradient)}
      </style>
      <defs>
        <linearGradient id="MyGradient">
          <stop offset="5%" stop-color="#F60" />
          <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
      </defs>
      
      <rect width="100" height="50"/>
    </svg></code>

This code defines a linear gradient within the element and assigns it as the fill value of the element. As a result, the rectangle will display the gradient hues running from #F60 to #FF6.

The above is the detailed content of How to Apply Linear Gradients to SVG Rect Elements Using CSS?. For more information, please follow other related articles on the PHP Chinese website!