使用xlink.href的SVG <use>不能使用Chrome和Mozilla中的fill url（）属性

Question

我正在尝试将样式应用于<use>元素。我有一个属性xlink.href用于形状和属性fill以及linearGradient

问题是，在Google Chrome中，此渐变不会与<use>标记一起显示，但在Microsoft Edge中一切正常，因此我们对<rect>和<use>进行渐变填充元素

Google Chrome：

<svg width="100" height="100">
    <use 
        class="tooth-crown-main" 
        xlink:href="/assets/teeth/teeth.svg#b1-crown" 
        x="0" y="0" 
        fill="url(#ToothBackground)" 
        stroke="#a7a9ac" stroke-alignment="inner" stroke-width="0.3">
    </use>
    <rect x="10" y="10" width="50" height="50" fill="url(#ToothBackground)" />
</svg>

<svg width="100" height="1" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="ToothBackground"  gradientTransform="rotate(90)">
            <stop offset="0%" stop-color="#e3f3ef" />
            <stop offset="30%" stop-color="#ffffff" />
            <stop offset="70%" stop-color="#ffffff" />
            <stop offset="100%" stop-color="#e3f3ef" />
        </linearGradient>
    </defs>
</svg>

Microsoft Edge：

在之前的谷歌浏览器中，这种工作正常，与Microsoft Edge相同。该问题可能与Chrome更新有关吗？

任何想法如何解决？

谢谢！