如何在 CSS 中將漸層應用於 SVG 矩形？-css教學-PHP中文網

如何在 CSS 中將漸層應用於 SVG 矩形？

Mary-Kate Olsen

發布： 2024-11-03 03:18:29

原創

588 人瀏覽過

How to Apply Gradients to SVG Rectangles in CSS?

CSS 中 SVG 漸變

本問題涉及為 SVG 的元素應用漸變。以下部分將解釋如何在 CSS 中實現此功能。

fill 屬性的使用

當前，您正在使用 fill 屬性為元素設定純色。雖然這對於設定單一顏色填充非常有效，但它並不適用於漸層。

使用漸變

要套用線性漸變，您需要使用 url() 函數來引用 SVG 中定義的漸變定義。在 CSS 中，語法如下：

fill: url(#gradient-id);

登入後複製

其中 #gradient-id 是您在 SVG 中為漸變定義的 ID。

範例

以下程式碼顯示如何為元素套用線性漸變：

CSS

rect {
  cursor: pointer;
  shape-rendering: crispEdges;
  fill: url(#MyGradient);
}

登入後複製

CSS

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

登入後複製

CSS

CSSCSSCSSSVG這將建立一個從紅色（#F60）到橘色（#FF6）的水平漸變，應用於元素。

以上是如何在 CSS 中將漸層應用於 SVG 矩形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！