SVG设置gradientUnits="userSpaceOnUse"后path元素渐变失效问题

问题原因 #

1. gradientUnits="userSpaceOnUse"的作用是让渐变的坐标参考整个SVG画布的全局坐标系，而非被填充元素自身的边界盒，渐变的坐标和范围不会随单个元素的transform属性变化。
2. 圆形SVG的<circle>元素本身的坐标就是基于96*96的画布定义的，从顶部到底部都有分布，刚好能覆盖渐变从红到黄的完整范围，所以渐变显示正常。
3. 爱心Path的原始路径坐标范围极小（y轴仅3~21.35），你是通过给单个<path>设置transform="scale(2.2)"来放大路径。这个变换仅作用于路径本身的绘制坐标，不会同步放大渐变的作用范围，导致所有爱心路径都集中在全局渐变的一小段色阶范围内，颜色差异极小，肉眼看起来就是纯色。

解决方法 #

方法1：将transform移动到父容器<g>上 #

给包裹所有path的<g>标签设置缩放变换，而不是给单个path设置，这样变换会同步作用于内部所有路径和对应的渐变坐标系：

<g fill="url(#grad1)" transform="scale(2.2)">
  <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="translate(0, 0)" />
  <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="translate(21, 0)" />
  <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="translate(21, 21)" />
  <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="translate(0, 21)" />
</g>

方法2：给渐变添加gradientTransform匹配路径变换 #

给线性渐变设置和路径相同的缩放变换，让渐变范围同步放大到匹配路径尺寸：

<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse" gradientTransform="scale(2.2)">
  <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
  <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
</linearGradient>

方法3：直接调整渐变坐标适配全局画布 #

把渐变的坐标范围调整到刚好覆盖所有爱心路径的实际绘制范围，不需要修改路径代码：

<!-- 所有爱心的实际y轴范围约为6~93，直接设置y2为96即可覆盖全范围 -->
<linearGradient id="grad1" x1="0" y1="0" x2="0" y2="96" gradientUnits="userSpaceOnUse">
  <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
  <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
</linearGradient>

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