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

Question

我的 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 相关代码保留在单独的 icon.svg 文件中。

如何将渐变应用于此图标？

谢谢！

Answer 1

看起来像是 Chrome 的 bug，可能是臭名昭著的问题 109212：来自 2012 年以来未应用的外部文件的 SVG ( filter| fill[\xe2\x80\xa6])；在相关问题defs中找到：Gradient in not shown in SVG sprite in Chrome。

\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n

此示例代码使用 dataURI 来模拟外部资源。在 Firefox 中，它可以正确渲染金色描边和红蓝色渐变填充，但在 Chrome 中，只有描边可见。

\n\n

为了奇偶性，相同的 SVG 和直接放置在 HTML 中的 defs 可以在两种浏览器中使用：

\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n

并且将独立的 SVG 加载到图像中，证明相同的真实 SVG（而不是 SVG-in-HTML）中的引用在两种浏览器中都有效。

\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n