如何在其他文件中使用 SVG 符号的渐变？

Question

我发现当我有一个带有符号的源 SVG 和一个使用 <use> 访问源 SVG 的目标 SVG 时，符号被导入并且能够访问渐变（可能是因为它是只是已经在页面上了）。但是，当源 SVG 在不同的文件中时，<symbol> 中的对象会被导入，但不会导入渐变。 如何导入渐变？

这是一些 MCVE 代码：

index.html:

<style>
  html,body,svg { width: 100% }
</style>

<!-- inline SVG with gradient -->
<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <linearGradient id="linear-gradient" x1="0.133" y1="0.008" x2="0.949" y2="1.101" gradientUnits="objectBoundingBox">
      <stop offset="0.042" stop-color="#21dbaa"/>
      <stop offset="0.358" stop-color="#00b4ef"/>
      <stop offset="0.433" stop-color="#01a7ec"/>
      <stop offset="0.568" stop-color="#0487e4"/>
      <stop offset="0.68" stop-color="#0768dd"/>
      <stop offset="0.965" stop-color="#5f1ae5"/>
    </linearGradient>
    <circle cx="1" cy="1" r="1" fill="url(#linear-gradient)"/>
  </symbol>
</svg>

<svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
 
  <!-- All instances of our symbol -->
  <use xlink:href="#myDot" x="5"  y="5" style="opacity:1.0" />
  <use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" />
  <use xlink:href="symbol.svg#myDot" x="35" y="5" style="opacity:0.6" stroke="black" stroke-width=".1" />
  <use xlink:href="symbol.svg#myDot" x="50" y="5" style="opacity:0.4" stroke="black" stroke-width=".1" />
  <use xlink:href="symbol.svg#myDot" x="65" y="5" style="opacity:0.2" stroke="black" stroke-width=".1" />
</svg>

symbol.svg:

<!-- external SVG with gradient -->
<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <linearGradient id="linear-gradient" x1="0.133" y1="0.008" x2="0.949" y2="1.101" gradientUnits="objectBoundingBox">
      <stop offset="0.042" stop-color="#21dbaa"/>
      <stop offset="0.358" stop-color="#00b4ef"/>
      <stop offset="0.433" stop-color="#01a7ec"/>
      <stop offset="0.568" stop-color="#0487e4"/>
      <stop offset="0.68" stop-color="#0768dd"/>
      <stop offset="0.965" stop-color="#5f1ae5"/>
    </linearGradient>
    <circle cx="1" cy="1" r="1" fill="url(#linear-gradient)"/>
  </symbol>
</svg>

这里有一个 working Codepen demo 说明了这个问题，使用与上面所示相同的代码。请注意从 index.html 中的内联 SVG 导入符号的两个圆圈如何正确显示渐变，但从 symbol.svg 导入符号的三个圆圈不显示渐变。

编辑： 这可能与询问外部文件中的引用渐变有关。

Answer 1

看起来浏览器对此功能的支持程度仍然较低 (source)。问题中给出的示例理论上应该在几年内起作用。

一种解决方法是在每个引用外部 SVG 的页面上包含渐变定义并改为指向它。

index.html:

<svg style="height: 0; width: 0;" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="linear-gradient" x1="0.133" y1="0.008" x2="0.949" y2="1.101" gradientUnits="objectBoundingBox">
        <stop offset="0.042" stop-color="#21dbaa"/>
        <stop offset="0.358" stop-color="#00b4ef"/>
        <stop offset="0.433" stop-color="#01a7ec"/>
        <stop offset="0.568" stop-color="#0487e4"/>
        <stop offset="0.68" stop-color="#0768dd"/>
        <stop offset="0.965" stop-color="#5f1ae5"/>
      </linearGradient>
    </defs>
</svg>

<svg>
    <use xlink:href="#myDot" fill="url(#linear-gradient)" />
</svg>

symbol.svg:

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
  <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
    <circle cx="1" cy="1" r="1" fill="url(#linear-gradient)"/>
  </symbol>
</svg>

如何在其他文件中使用 SVG 符号的渐变？

How can I use gradients from SVG symbols in other files?

html

svg

linear-gradients