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

Susan Sarandon
Release: 2024-11-04 05:55:29
Original
680 people have browsed it

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>
Copy after login
  • 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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login
<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
}</code>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template