如何使用 CSS 將線性漸層應用於 SVG 矩形元素？

使用CSS 將線性漸變應用於SVG 矩形元素

為了增強視覺效果，開發人員經常尋求將線性漸變應用於SVG 矩形元素。本問題深入探討了利用 CSS 實現此類漸層的技術。

CSS 方法

要透過 CSS 將線性漸變應用於 SVG 矩形元素，請利用填充屬性，就像在任何其他元素的 fill 屬性中一樣。在 SVG 本身中定義線性漸變至關重要。

考慮這個範例：

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

<code class="html"><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></code>

此程式碼定義了 中的線性漸變。元素並將其指定為 的填充值元素。結果，矩形將顯示從 #F60 到 #FF6 的漸層色調。

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