如何使用 CSS 将线性渐变应用于 SVG 矩形？-css教程-PHP中文网

如何使用 CSS 将线性渐变应用于 SVG 矩形？

Susan Sarandon

发布： 2024-11-04 05:55:29

原创

719 人浏览过

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

如何使用 CSS 将线性渐变应用于 SVG 矩形

将渐变应用于 SVG 元素是 Web 开发中的一项常见任务。在本文中，我们将探索如何使用 CSS 将线性渐变应用于 SVG 矩形。

理解渐变语法

在 CSS 中，线性渐变是使用背景图像定义的财产。语法如下：

<code class="css">linear-gradient(direction, color-stop1%, color-stop2%, ..., color-stopN%);</code>

登录后复制

direction: 指定渐变流动的方向。常见值包括到顶部、到底部、向左和向右。
color-stop: 表示渐变线上定义特定颜色的点。它以 0% 到 100% 之间的百分比值表示。可以定义多个色标，每个色标具有不同的颜色和位置。

应用渐变

要将渐变应用于 SVG 矩形，可以使用 fill 属性。只需提供 Linear-gradient() 值作为填充值即可。例如：

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: linear-gradient(to right, #F60 5%, #FF6 95%);
}</code>

登录后复制

在 SVG 中定义渐变

在 SVG 文档本身中，您可以使用定义渐变。元素。该元素通常放置在中。部分。例如：

<code class="svg"><defs>
    <linearGradient id="MyGradient">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
</defs></code>

登录后复制

在上面的示例中，渐变是用两个色标定义的：一个在 5% 处使用颜色 #F60，另一个在 95% 处使用颜色 #FF6。 id 属性为渐变提供了唯一的标识符，允许您在 CSS 中引用它。

在 CSS 中引用渐变

在 CSS 中，您可以使用url() 函数：

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

登录后复制

这将应用中定义的渐变

完整示例

以下是如何将线性渐变应用于 SVG 矩形的完整示例：

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

登录后复制

应用使用 CSS 对 SVG 矩形进行线性渐变是一种强大的技术，可以增强设计的视觉吸引力。通过利用 fill 属性和 Linear-gradient() 值，您可以创建具有各种颜色、方向和不透明度的渐变。

以上是如何使用 CSS 将线性渐变应用于 SVG 矩形？的详细内容。更多信息请关注PHP中文网其他相关文章！