How do you apply a linear gradient to an SVG rectangle using CSS?

How to Apply a Linear Gradient to an SVG Rectangle Using CSS

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.

Understanding the Gradient Syntax

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>

• direction: Specifies the direction in which the gradient will flow. Common values include to top, to bottom, to left, and to right.
• color-stop: Represents a point on the gradient line where a specific color is defined. It is expressed as a percentage value between 0% and 100%. Multiple color stops can be defined, each with a different color and position.

Applying the Gradient

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>

Defining the Gradient in the SVG

In the SVG document itself, you can define the gradient using the element. This element is typically placed within the section. For example:

<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.

Referencing the Gradient in 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 element to the SVG rectangle.

Complete Example

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!