SVG 使用和渐变作为填充答案

【问题标题】：SVG use and gradients as fillSVG 使用和渐变作为填充
【发布时间】：2017-10-29 08:53:37
【问题描述】：

我一直在尝试将我的 SVG 图标外部化到一个文件中，并使用 <svg><use xlink:href="file.svg#icon" /></svg> 之类的标记来引用它们。从理论上讲，这非常有效，但是不同的浏览器在渲染方面存在问题。当在文件中引用带有<use>的符号并直接打开svg文件的url时，所有浏览器都能够正确呈现svg。

简而言之，当在标记中引用带有<svg><use/></svg> 的符号时，是否有一种跨浏览器方法可以让 SVG linearGradients 作为元素的填充？

我设置了一个 plunker 来演示这个问题： http://plnkr.co/edit/feKvZ7?p=preview

简化，标记如下：

<!DOCTYPE html>
    <html>
      <body>
        <h1>SVG sprite test</h1>
        <svg width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use xlink:href="icon.svg#icon" />
        </svg>
      </body>
    </html>

SVG 文件如下所示：

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <linearGradient id="gradient">
          <stop offset="0" stop-color="black" />
          <stop offset="1" stop-color="white" />
        </linearGradient>
      </defs>
      <symbol id="icon" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40" stroke="black" fill="url(#gradient)" />
      </symbol>
    
      <use id="iconuse" xlink:href="#icon" width="100" height="100" />
    
    </svg>

这是它在不同浏览器中的样子：

【问题讨论】：

多年以后……这些天你在做什么？
@NickDarvey 是个好问题。我已经放弃使用这种方法，现在正在使用 svgr 之类的东西：github.com/gregberge/svgr。不过，这可能是一个有趣的时间重新审视。快速浏览一下 Plunkr，浏览器之间在渲染不同 SVG 的方式上仍然存在差异。

标签： html svg svg-sprite

【解决方案1】：

symbol 标签用于隐藏其中的元素。 symbol 中的元素使用 <use> 命令通过其唯一指示符调用。
因此，最好使用这种调用单个元素的方法，而不是调用整个symbol

另外，元素在使用<use>时属于shadow DOM，在某些情况下使用CSS变得不可能
因此，最好将symbol内部的所有内部样式删除，直接赋值给use命令

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="gradient">
      <stop offset="0" stop-color="black" />
      <stop offset="1" stop-color="white" />
    </linearGradient>
  </defs>
  <symbol  id="icon"  viewBox="0 0 100 100"> 
    <circle id="circle" cx="50" cy="50" r="40"   />
     <rect id="rect" x="100" y="10" width="100" height="100" />
  </symbol>

  <use class="iconuse" xlink:href="#circle" width="100" height="100" fill="url(#gradient)" stroke="black" />
     <use class="iconuse" xlink:href="#rect" width="100" height="100" fill="url(#gradient)" />
</svg>

【讨论】：

MDN 显示使用 xlink:href 直接作为符号标签，而不是其中的单个元素：developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol
@RJo 哪里说不能从 Symbol 中调用单个元素？在 MDN 中只是一个带有一个内部元素的示例，我有两个元素如果您确定您声称的内容，请显示来自规范 W3C 的链接
这只是指向您的原始描述：“最好使用这种调用单个元素的方法而不是调用整个符号”。无论如何，最初的问题是关于指向外部 SVG 文件中具有 id 的元素。不指向内联 SVG 定义中的元素。

【解决方案2】：

尝试下一个（这是 Inkscape 提供渐变的实现方式）：

<linearGradient id="gradient">
  <stop
     style="stop-color:black;"
     offset="0"/>
  <stop
     style="stop-color:white;"
     offset="1" />
</linearGradient>
...
<path
   style="fill:url(#gradient); ...

【讨论】：

将属性更改为 style 属性并不能解决问题
尝试将内联SVG改成img <img src="./icon.svg#icon" />
这可能适用于渲染，但我会失去多功能性。不想走这条路。
这方面有什么进展吗？我遇到了同样的问题，无法解决。