SVG渐变渐变单位与渐变变换 - 不同的渐变

Posted 2023-03-28

【中文标题】SVG渐变渐变单位与渐变变换 - 不同的渐变

【英文标题】：SVG gradient gradient units vs gradienttransform - not the same gradient

【发布时间】：2022-01-19 14:41:25

【问题描述】：

我试图弄清楚从梯度转换到梯度单元的转换。我得到不同的梯度分布。为什么？

<svg   xmlns="http://www.w3.org/2000/svg" >
  <defs>
    <linearGradient id="linear1" gradientTransform="rotate(45 0.5 0.5)" spreadMethod="pad">
      <stop offset="0%" stop-color="gold"/>
      <stop offset="100%" stop-color="blue"/>
    </linearGradient>
    <linearGradient id="linear2" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
      <stop offset="0%" stop-color="gold"/>
      <stop offset="100%" stop-color="blue"/>
    </linearGradient>
  </defs>
  
  <rect fill="url(#linear1)" x="0" y="0"   />
  <rect fill="url(#linear2)" x="0" y="270"   />
</svg>

这2个渐变不一样：

【问题讨论】：

@RobertLongson 意思是 x1 应该是 13%，x2 应该是 87%（近似垃圾数字） - 我发现了 spreadMethod="repeat" 的问题。

【参考方案1】：

因为一个矩形的左右边之间的距离不等于将它旋转 45 度时从一个角到对角的距离。

左右两侧相距 270 个单位（默认 x2 为 100%，其他默认为 0%）。

两个角相距 270 * √2 个单位

因此，鉴于旋转变换是距离不变的，因此 x1,y1 和 x2,y2 之间的距离在每种情况下都是不同的。