Question

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

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

我设置了一个说明问题的傻瓜： 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>

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

Answer 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>

Answer 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); ...

SVG使用和渐变作为填充

2 个答案: