Chrome中SVG堆叠引用外部radialGradient元素显示异常问题

问题说明 #

通过<svg><use href="icons.svg#shape-green" /></svg>在Chrome中引用外部SVG资源时，其中的radialGradient元素无法正常渲染；但将相同SVG代码内联到HTML页面时，渐变显示正常。预期效果是展示带有绿色径向渐变的圆形，外部引用时渐变丢失，仅能看到红色底层圆形和深色背景。

问题原因 #

使用gradientUnits="userSpaceOnUse"的渐变，在跨文档引用SVG时，会基于主HTML文档的坐标系计算位置，而非外部SVG自身的viewBox。这就导致渐变被偏移到了可见区域之外，看起来像是没有显示。

解决方案 #

方案1：将渐变定义移入symbol内部 #

把<radialGradient>放到目标<symbol>标签的内部，这样渐变的坐标系会绑定到symbol自身的viewBox，无论在哪个文档引用，都能正确计算位置。

修改后的icons.svg代码：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 200 200" xml:space="preserve">
     <style>
        .stack_icon { display:none }
        .stack_icon:target { display:inline }
     </style>
        
    <symbol viewBox="0 0 200 200" id="shape-green">
        <defs>
            <radialGradient id="path2597radialGradient" cx="50.0736" cy="338.8645" r="40.2618" fx="57.261" fy="343.9495" gradientTransform="matrix(-9.176143e-03 -1.9189 1.8714 -8.948554e-03 -553.385 182.0688)" gradientUnits="userSpaceOnUse">
                <stop  offset="0" style="stop-color:#C5FF89"/>
                <stop  offset="0.4371" style="stop-color:#81CB31"/>
                <stop  offset="0.6741" style="stop-color:#5AAE00"/>
            </radialGradient>
        </defs>
        <rect fill="#2E2E2E" width="200" height="200"/>
        <g>
            <rect x="25" y="25" fill="#2E2E2E" width="150" height="150"/>
            <path                    
                fill="#FF0000" 
                d="M101.3,36.3c35.2,0,63.7,28.5,63.7,63.6c0,35.2-28.5,63.7-63.6,63.7h-0.1c-35.2,0-63.7-28.5-63.7-63.6C37.5,64.9,66.1,36.3,101.3,36.3L101.3,36.3z"/>
                
            <path 
                fill="url(#path2597radialGradient)" 
                d="M101.3,36.3c35.2,0,63.7,28.5,63.7,63.6c0,35.2-28.5,63.7-63.6,63.7h-0.1c-35.2,0-63.7-28.5-63.7-63.6C37.5,64.9,66.1,36.3,101.3,36.3L101.3,36.3z"
            />
        </g>
    </symbol>   
</svg>

方案2：切换为gradientUnits="objectBoundingBox" #

如果不想调整渐变的位置结构，可以将渐变的gradientUnits属性改为objectBoundingBox。这个属性会让渐变基于应用它的元素（这里是圆形path）的边界盒来计算位置，无需依赖外部文档的坐标系。

修改icons.svg中的渐变定义：

<radialGradient id="path2597radialGradient" cx="0.5" cy="0.5" r="0.5" fx="0.55" fy="0.55" gradientUnits="objectBoundingBox">
    <stop  offset="0" style="stop-color:#C5FF89"/>
    <stop  offset="0.4371" style="stop-color:#81CB31"/>
    <stop  offset="0.6741" style="stop-color:#5AAE00"/>
</radialGradient>

注意：使用objectBoundingBox时，cx、cy、r等参数需要调整为0到1之间的相对值，适配元素的边界盒坐标系。

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