Home > Article > Web Front-end > 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
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!