使用svg-sprite时svg符号中的线性渐变

编程问答 2022-06-13

问题描述

我正在从外部文件这样的角度应用程序中使用svg sprite：

<svg width="235" height="29" viewBox="0 0 235 29" fill="none" xmlns="http://www.w3.org/2000/svg">
    <use xlink:href="./assets/img/sprite.svg#logo"></use>
 </svg>

我的SVG小图片：

<symbol id="logo" viewBox="0 0 235 29" fill="none" xmlns="http://www.w3.org/2000/svg">

    <path d="M6.73092 6.67399L4.57521 4.29028C3.1336 5.59109 1.98151 7.18038 1.19366 8.95509C0.405817 10.7298 -0.000194815 12.6503 0.00196167 14.592H3.21153C3.21087 13.0993 3.52382 11.6232 4.13009 10.2591C4.73637 8.89513 5.62245 7.6737 6.73092 6.67399Z" fill="url(#paint5_linear)"/>
    <defs>
      <linearGradient id="paint5_linear" x1="1.19764" y1="14.9804" x2="5.01264" y2="5.05611" gradientUnits="userSpaceOnUse">
        <stop offset="0.07" stop-color="#A1CB3A"/>
        <stop offset="0.25" stop-color="#82C35D"/>
        <stop offset="0.92" stop-color="#11A6DE"/>
      </linearGradient>
    </defs>
  </symbol>

问题：我的svg使用id引用线性渐变的那些部分无法渲染。我在Stack Overflow上发现了类似的问题，但它只能在同一文件中使用svg sprite来解决问题，而不能在外部文件中解决。感谢您的帮助，谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularhtmllinear-gradientssvg