如何在 <symbol> 标签中将线性渐变应用于 SVG <use>？

Answer 1

似乎是一个 Chrome 错误，可能是臭名昭著的 问题 109212：SVG（

filter

|

fill

[…]）来自 2012 年未应用的外部文件；在相关问题中找到：

defs

中的渐变未显示在Chrome的SVG精灵中。

<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(%23gr)"
     stroke="gold" />
   </symbol>
  </defs>
 </svg>#icon' />
</svg>

本示例代码使用dataURI 模拟外部资源。在 Firefox 中，它会正确呈现金色描边和红蓝渐变填充，但在 Chrome 中，只有描边是可见的。

---

对于奇偶校验，具有 defs 的相同 SVG 直接放置在 HTML 中，适用于两种浏览器：

<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(%23gr)'
    stroke='gold'/>
  </symbol>
 </defs>
 <use href='%23icon'/>
</svg>"></img>

Answer 2

我遇到了类似的问题，将 SVG 代码直接粘贴到 HTML 代码中，如下所示：

<svg version="2.0" style="display: none;">
  <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 fill="url(#gradient1)" 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"/>
    </symbol>
  </defs>
</svg>

<svg version="2.0" style="width: 5rem; height: 5rem;">
  <use href="#icon-account" />
</svg>

我通过使用定义从 SVG 中删除

display: none;

来解决它：

- <svg version="2.0" style="display: none;">
+ <svg version="2.0" width="0" height="0">
    <defs>
  ...