不使用url()函数引用SVG效果

Question

我们使用Svelte/Sapper前端与客户端路由。当用户在不同的页面之间导航时，页面上的SVG有时会出现故障.示例：

​

​

(问题末尾的SVG源)

这种故障是由于使用HTML标记和用CSS <base>函数引用线性梯度效应造成的。这将导致SVG中无效的URL (基+元素id)，并且不会应用效果。

与我的问题有关的问题：

• SVG在Safari (移动/桌面)中显示为黑匣子
• 在包含SVG标记元素的页上使用基标记无法呈现标记。
• iOS -线性梯度显示为黑色
• 在转换过程中，SVGs在Safari中变成黑色，类似于带有标记的bug。
• window.history.pushState后SVG路径填充呈现可能中断
• SVG url()在Safari和Firefox中不工作

那么，我的问题是:为了完全避免这个问题，url() 可以引用这样的效果，而不需要中继url()函数。

哈基溶液

我通过监听动画事件的结束，然后在setTimeout中添加和删除<svg>元素中的display: inline-block;来解决这个问题。这迫使浏览器重新呈现它，并在每次动画之后修复故障。这显然是一个棘手的解决方案，需要大量的技术债务。如果我找到了解决这个问题的不同/更好的方法，我会给出不同的答案。

SVG图标源：

<svg xmlns="http://www.w3.org/2000/svg" style="fill: currentColor;" class="w-8 h-8" viewBox="0 0 24 24">
  <defs>
    <path id="a" d="M12 10.3L2.4 1v22l9.6-9.2 1.8-1.8 5.4-5.2v10.5l-3.7-3.5-1.8 1.7 7.9 7.6V1L12 10.3zm-7.1 6.9V6.8l5.4 5.2-5.4 5.2z">
    </path>
  </defs>
  <clipPath id="b">
    <use href="#a" overflow="visible"></use>
  </clipPath>
  <g clip-path="url(#b)">
    <linearGradient id="c" gradientUnits="userSpaceOnUse" x1="-732.18" y1="294.75" x2="-731.55" y2="294.75" gradientTransform="scale(47.46 -47.46) rotate(45 -9.66 1030.9)">
      <stop offset="0" stop-color="#201351"></stop>
      <stop offset=".25" stop-color="#201351"></stop>
      <stop offset=".39" stop-color="#620f3c"></stop>
      <stop offset=".53" stop-color="#990b2a"></stop>
      <stop offset=".65" stop-color="#c1081e"></stop>
      <stop offset=".74" stop-color="#d90716"></stop>
      <stop offset=".8" stop-color="#e20613"></stop>
      <stop offset="1" stop-color="#e20613"></stop>
    </linearGradient>
    <path fill="url(#c)" d="M-8.6 12L12-8.6 32.6 12 12 32.6z"></path>
  </g>
</svg>

Answer 1

最干净的解决方案是在静态地址引用来自一个SVG精灵文件的所有图标。

例如，https://example.com/assets/sprite.svg会引用<symbol>元素中的图标标记：

<svg xmlns="http://www.w3.org/2000/svg">
    <!-- use the viewBox from your icon <svg> element -->
    <symbol id="unique-icon" viewBox="0 0 24 24">
        <!-- quote everything inside your icon <svg> element -->
    </symbol>
    <!-- more icons -->
</svg>

图标的用法如下所示：

 <svg><use xlink:href="https://example.com/assets/sprite.svg#unique-icon></svg>`.

注意，您仍然可以将样式应用于该<use>元素，该元素将由阴影DOM中的图标标记继承。