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

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中文網其他相關文章！