如何將線性漸層應用於 SVG 矩形？

將線性漸變應用於SVG 元素

在SVG 設計領域，您可能會遇到需要使用具有視覺吸引力的漸變來增強圖形的需求。本文將引導您完成將線性漸層應用於 SVG 元素的過程，特別注意矩形。

在 CSS 中，「fill」屬性可讓您為矩形等 SVG 元素指派純色。但是，要實現漸變效果，您可以利用線性漸層的強大功能。

要在 SVG 中定義線性漸變，請使用「」元素。指定漸變的 ID 及其方向。在此元素中，建立多個「stop」元素來定義漸層中每個點的顏色和位置。

接下來，參考矩形元素的 CSS「fill」屬性中定義的漸變 ID。不要使用純色，而是指定“url(#GradientID)”，將“GradientID”替換為 SVG 中定義的實際 ID。

例如：

<code class="css">rect {
    ...
    fill: url(#MyGradient);
}</code>

在HTML 中SVG 部分，確保「MyGradient」漸變在「」中正確宣告部分，如下所示：

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

實作這些步驟將有效地將可自訂的線性漸層應用於您的SVG 矩形元素，增強其視覺吸引力並增加設計的深度。

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