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>

假设external.svg与该文件位于同一站点上。

为什么此外部SVG渐变未显示在本地SVG填充中？

1 个答案: