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导入符号的三个圆圈没有显示渐变。

编辑：这可能是another question的副本，询问在外部文件中引用渐变。

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符号的渐变？

1 个答案: