SVG径向渐变填充失效排查：我的代码存在什么错误？

让我们一步步拆解你代码里的问题，以及对应的修复方案：

主要问题分析 #

1. <path>未继承外部填充属性
   你在包含<use>的SVG上设置了fill="url(#RadialGradient1)"，但<symbol>里的<path>没有明确设置fill为inherit，导致它不会自动继承外部的填充样式，渐变自然无法生效。

2. 过时的xlink:href属性
   虽然部分旧浏览器还支持xlink:href，但现代SVG标准已经用href替代了这个属性，继续使用可能会在新环境下出现兼容性问题。

3. 图形尺寸不匹配导致渐变变形
   你的<symbol>是200x200的正圆形 viewBox，但引用它的SVG是47x21的矩形尺寸，这会把圆形拉伸成椭圆，径向渐变也会跟着被拉伸，即使生效了视觉效果也会和预期不符。

修复后的完整代码 #

<body>
  <svg style="display:none">
    <defs>
      <!-- 明确指定渐变的中心和半径（可选，默认值也是50%，但显式写更清晰） -->
      <radialGradient id="RadialGradient1" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
      <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
    </defs>
    <symbol viewBox="0 0 200 200" id="img--svg--icon">
      <!-- 添加fill="inherit"让path继承外部的填充样式 -->
      <path d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0" fill="inherit"/>
    </symbol>
  </svg>

  <section class="item item--two">
    <!-- 把fill属性直接放到use标签上，或者保持在svg上都可以，只要path设置了inherit -->
    <!-- 如果要保持正圆，把width和height设为相同值，比如47x47 -->
    <svg width="47" height="47" class="item__icon">
      <use href="#img--svg--icon" fill="url(#RadialGradient1)"></use>
    </svg>
    <p class="item__descr">Гипогликемия</p>
  </section>
</body>

关键修复点说明 #

• 给<path>添加fill="inherit"：这是核心修复，确保图形能接收外部传递的渐变填充。
• 替换xlink:href为href：符合当前SVG规范，避免潜在的兼容性问题。
• 调整引用SVG的尺寸为正方形（可选）：如果需要正圆形的渐变效果，保持宽高一致，避免图形和渐变被拉伸变形。

你可以先测试这个修复后的代码，应该就能看到径向渐变正常显示在圆形上了。

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