首頁 > web前端 > css教學 > 如何使用 CSS 將線性漸層應用於 SVG 矩形元素?

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

Patricia Arquette
發布: 2024-10-30 17:13:02
原創
634 人瀏覽過

How to Apply Linear Gradients to SVG Rect Elements Using CSS?

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板