使用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>
此程式碼定義了
以上是如何使用 CSS 將線性漸層應用於 SVG 矩形元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!