为什么这个外部 SVG 渐变没有显示在本地 SVG 填充中

Question

我有以下SVG：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color: #e7d4ca; stop-opacity: 1" />
      <stop offset="100%" style="stop-color: #487c8c; stop-opacity: 1" />
    </linearGradient>
  </defs>
    <rect x="0" y="0" rx="20" height="100%" width="100%" style="fill: url(#gradient)"></rect>
</svg>

按原样显示，它完美运行。但是当我尝试将此 SVG 中的渐变引用为另一个 SVG 中的外部依赖项时，它不起作用：

<svg>
  <use xlink:href="external.svg#gradient"></use>
  <rect x="0" y="0" rx="20" height="100%" width="100%" style="fill: url(#gradient)"></rect>
</svg>

有什么想法吗？

Answer 1

我想你正在寻找这样的东西......

<svg>
  <rect x="0" y="0" rx="20" height="100%" width="100%" style="fill: url(#external.svg#gradient)"></rect>
</svg>

假设外部.svg与此文件位于同一站点上。