如何在<use>元素中使用defs与linearGradient？

问题根源 #

当使用<use>引用SVG精灵图中的<symbol>时，浏览器只会将<symbol>内部的内容克隆到Shadow DOM中，位于<symbol>外部的<defs>元素不会被包含进去。这就导致路径中引用的渐变url(#paint0_linear_0_23023)无法被找到，自然无法显示渐变效果。

修复步骤 #

将<defs>元素移动到<symbol>内部，确保渐变定义和使用它的路径处于同一个作用域内。

修改后的精灵图代码 #

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol fill="none" xmlns="http://www.w3.org/2000/svg" id="logo">
    <defs>
      <linearGradient
        id="paint0_linear_0_23023"
        x1="3.38746"
        y1="11.0947"
        x2="18.9049"
        y2="6.14532"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#000"></stop>
        <stop offset="1" stop-color="#fff"></stop>
      </linearGradient>
    </defs>

    <path
      d="M24.9866 20.4165C24.9008 20.3274 24.864 20.2256 24.864 20.111V8.1739C24.864 8.04664 24.9008 7.9321 24.9866 7.85575C25.0724 7.77939 25.1705 7.74121 25.2809 7.74121H26.6908C26.8134 7.74121 26.9237 7.77939 26.9973 7.85575C27.0709 7.9321 27.1077 8.03391 27.1077 8.1739V14.3461L30.0256 11.4827C30.0624 11.4573 30.1237 11.4063 30.1972 11.3427C30.2708 11.2791 30.3321 11.2409 30.4057 11.2155C30.4792 11.19 30.5651 11.1773 30.6631 11.1773H32.2815C32.3918 11.1773 32.4899 11.2155 32.5635 11.2918C32.637 11.3682 32.6738 11.4573 32.6738 11.5845C32.6738 11.699 32.6125 11.8009 32.5022 11.9154L28.9222 15.4024L32.9313 19.8692C33.0416 19.9838 33.1029 20.0856 33.1029 20.1747C33.1029 20.2892 33.0662 20.391 32.9926 20.4674C32.919 20.5437 32.8332 20.5819 32.7229 20.5819H31.0677C30.9083 20.5819 30.7857 20.5565 30.7122 20.5183C30.6386 20.4801 30.5405 20.391 30.4302 20.2765L27.1077 16.6495V20.1492C27.1077 20.2638 27.0709 20.3656 26.9973 20.4546C26.9237 20.5437 26.8257 20.5819 26.6908 20.5819H25.2809C25.1705 20.5437 25.0602 20.5056 24.9866 20.4165Z" fill="#232323"
    ></path>
    <path
      d="M16.6494 21.3963H10.8626C8.99899 21.3963 7.47871 19.8183 7.47871 17.8839V11.1263C7.47871 9.23013 8.96221 7.65209 10.789 7.61391C11.7085 7.58846 12.5667 7.94479 13.2288 8.61928C13.8786 9.28104 14.2464 10.1719 14.2464 11.1263V15.8223C14.2464 16.4077 13.7805 16.8913 13.2165 16.8913C12.6526 16.8913 12.1867 16.4077 12.1867 15.8223V11.1263C12.1867 10.7573 12.0396 10.4009 11.7943 10.1464C11.5369 9.89189 11.1936 9.7519 10.838 9.7519C10.1269 9.76463 9.53845 10.3882 9.53845 11.1263V17.8966C9.53845 18.6475 10.1269 19.2711 10.8626 19.2711H16.6494C17.3728 19.2711 17.9735 18.6602 17.9735 17.8966V8.77199C17.9735 8.22476 17.667 7.74117 17.1889 7.5121L11.402 4.86506C11.0587 4.71234 10.6787 4.71234 10.3354 4.86506L4.5485 7.5121C4.07034 7.72844 3.76384 8.22476 3.76384 8.77199V17.8966C3.76384 18.6475 4.35233 19.2711 5.08795 19.2711H5.93391C6.49789 19.2711 6.96378 19.7547 6.96378 20.3401C6.96378 20.9255 6.49789 21.4091 5.93391 21.4091H5.08795C3.22438 21.4091 1.7041 19.831 1.7041 17.8966V8.77199C1.7041 7.38484 2.50102 6.12495 3.71479 5.565L9.50167 2.91795C10.3721 2.52344 11.3652 2.52344 12.2357 2.91795L18.0226 5.565C19.2486 6.12495 20.0333 7.38484 20.0333 8.77199V17.8966C20.0333 19.8183 18.513 21.3963 16.6494 21.3963Z"
      fill="url(#paint0_linear_0_23023)"
    ></path>
  </symbol>
</svg>

验证引用 #

你的现有引用代码无需修改，保持原样即可：

<svg width="124" height="24" viewBox="0 0 124 24">
   <use xlink:href="/spritemap.svg#logo"></use>
</svg>

这样修改后，渐变定义会被包含在<symbol>的克隆内容中，路径就能正确找到并应用渐变效果了。

内容的提问来源于stack exchange，提问作者Oleksandr