Applying a gradient to an SVG element is a common task in web development. In this article, we will explore how to use CSS to apply a linear gradient to an SVG rectangle.
In CSS, a linear gradient is defined using the background-image property. The syntax is as follows:
<code class="css">linear-gradient(direction, color-stop1%, color-stop2%, ..., color-stopN%);</code>
To apply the gradient to an SVG rectangle, you can use the fill property. Simply provide the linear-gradient() value as the value for fill. For example:
<code class="css">rect { cursor: pointer; shape-rendering: crispEdges; fill: linear-gradient(to right, #F60 5%, #FF6 95%); }</code>
In the SVG document itself, you can define the gradient using the
<code class="svg"><defs> <linearGradient id="MyGradient"> <stop offset="5%" stop-color="#F60" /> <stop offset="95%" stop-color="#FF6" /> </linearGradient> </defs></code>
In the above example, the gradient is defined with two color stops: one at 5% with the color #F60 and the other at 95% with the color #FF6. The id attribute provides a unique identifier for the gradient, which allows you to reference it in the CSS.
In the CSS, you can reference the defined gradient using the url() function:
<code class="css">rect { cursor: pointer; shape-rendering: crispEdges; fill: url(#MyGradient); }</code>
This will apply the gradient defined in the
Here is a complete example of how to apply a linear gradient to an SVG rectangle:
<code class="svg"><svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="MyGradient"> <stop offset="5%" stop-color="#F60" /> <stop offset="95%" stop-color="#FF6" /> </linearGradient> </defs> <rect width="100" height="50" fill="url(#MyGradient)" /> </svg></code>
<code class="css">rect { cursor: pointer; shape-rendering: crispEdges; }</code>
Applying a linear gradient to an SVG rectangle using CSS is a powerful technique that can enhance the visual appeal of your designs. By utilizing the fill property and linear-gradient() value, you can create gradients with various colors, directions, and opacities.
The above is the detailed content of How do you apply a linear gradient to an SVG rectangle using CSS?. For more information, please follow other related articles on the PHP Chinese website!