如何將線性漸變應用于<use>標簽中的SVG<symbol>？

我的 HTML 檔案中有以下幾行：

<div class="account-container">
 <svg id="icon-account" style="width: 5rem; height: 5rem;">
  <use href="/icons.svg#icon-account" />
 </svg>
</div>

icon.svg 看起來像這樣：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>

  <linearGradient id="gradient1" x1="21.3635" y1="1.72727" x2="21.3639" y2="41"     gradientUnits="userSpaceOnUse">
   <stop stop-color="#7DC2C9"/>
   <stop offset="1" stop-color="#446B73"/>
  </linearGradient>

  <symbol id="icon-account" viewBox="0 0 42 42" >
   <path d="M6.09091 34.3314C10.9277 29.4164 15.2241 27.245 21 27.1818C27.3352 27.4877 31.7332 29.4904 36.2727 33.9136M41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21ZM26.4545 15.1818C26.4545 18.1943 24.0125 20.6364 21 20.6364C17.9875 20.6364 15.5455 18.1943 15.5455 15.1818C15.5455 12.1694 17.9875 9.72727 21 9.72727C24.0125 9.72727 26.4545 12.1694 26.4545 15.1818Z" fill="none"/>
  </symbol>

 </defs>
</svg>

我想將 #gradient1 應用于圖示。在 SVG 檔案的路徑上或在 CSS 中使用 stroke=url(#gradient1) 設定筆觸不起作用，并且根本不呈現圖示。

在 HTML 檔案中包含以下 SVG defs 允許參考漸變，然后它就可以作業了：

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <defs>
    <linearGradient
      id="gradient1"
      x1="21.3635"
      y1="1.72727"
      x2="21.3639"
      y2="41"
      gradientUnits="userSpaceOnUse"
    >
      <stop stop-color="#7DC2C9" />
      <stop offset="1" stop-color="#446B73" />
    </linearGradient>
  </defs>
</svg>

但是，我想避免使用 SVG 定義污染 HTML，并將所有與 SVG 相關的代碼保存在單獨的 icons.svg 檔案中。

如何將漸變應用于此圖示？

謝謝！

uj5u.com熱心網友回復：

似乎是 Chrome 的錯誤，可能是臭名昭著的問題 109212：filterfill來自 2012 年未應用的外部檔案的SVG ( | [...])；在相關問題中defs找到：Gradient in not show up in SVG sprite in Chrome。

<svg style="width: 5rem; height: 5rem;">
 <use href='data:image/svg xml,<svg version="1.1" 
  xmlns="http://www.w3.org/2000/svg">
  <defs>
   <linearGradient id="gr">
    <stop offset=".2" stop-color="red" />
    <stop offset=".8" stop-color="blue" />
   </linearGradient>
   <symbol id="icon" viewBox="0 0 8 8" >
    <path d="M0 0 L 8,0 8,8 0,8 Z M 2,2 L 6,2 6,6 2,6 Z" 
     fill="url(#gr)"
     stroke="gold" />
   </symbol>
  </defs>
 </svg>#icon' />
</svg>

此示例代碼使用 dataURI 來模擬外部資源。在 Firefox 中，它可以正確渲染金色筆觸和紅藍漸變填充，但在 Chrome 中僅筆觸可見。

對于奇偶校驗，直接在 HTML 中放置 defs 的相同 SVG 可在兩種瀏覽器中使用：

顯示代碼片段

<svg style="width: 5rem; height: 5rem;">
 <use href='#icon' />
</svg>

<svg version="1.1" 
  xmlns="http://www.w3.org/2000/svg">
  <defs>
   <linearGradient id="gr">
    <stop offset=".2" stop-color="red" />
    <stop offset=".8" stop-color="blue" />
   </linearGradient>
   <symbol id="icon" viewBox="0 0 8 8" >
    <path d="M0 0 L 8,0 8,8 0,8 Z M 2,2 L 6,2 6,6 2,6 Z" 
     fill="url(#gr)"
     stroke="gold" />
   </symbol>
  </defs>
 </svg>

并且自包含的 SVG 加載到影像中，證明在相同的真實 SVG（不是 SVG-in-HTML）中的參考在兩種瀏覽器中都有效。

顯示代碼片段

<img src="data:image/svg xml;charset=utf-8,
<svg xmlns='http://www.w3.org/2000/svg' version='1.1'>
 <defs>
  <linearGradient id='gr'>
   <stop offset='.2' stop-color='red'/>
   <stop offset='.8' stop-color='blue'/>
  </linearGradient>
  <symbol id='icon' viewBox='0 0 8 8'>
   <path d='M0 0 L 8,0 8,8 0,8 Z M 2,2 L 6,2 6,6 2,6 Z'
    fill='url(#gr)'
    stroke='gold'/>
  </symbol>
 </defs>
 <use href='#icon'/>
</svg>"></img>

標籤：css svg 线性梯度

上一篇：很難將代碼放入一個svg（svg圖）

下一篇：SVG影像在懸停期間更改為不同的SVG影像（不是過濾器）