SVG 线性渐变 objectBoundingBox 与 userSpaceOnUse

Question

我正在制作两个渐变：一个以 objectBoundingBox 为单位，另一个以 userSpaceOnUse 为单位。这个想法是让它们看起来一样。但不知何故，他们是不同的。这是 svg 文件。

<svg width="500" height="500" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient id="user-grad" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="200" y2="100">
          <stop stop-color="orange" offset="0"/>
          <stop stop-color="blue" offset="1"/>
        </linearGradient>
        <linearGradient id="box-grad" x1="0" y1="0" x2="1" y2="1">
          <stop stop-color="orange" offset="0"/>
          <stop stop-color="blue" offset="1"/>
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="200" height="100" fill="url(#user-grad)"/>
    <rect x="250" y="0" width="200" height="100" fill="url(#box-grad)"/>    
</svg>

这是它的样子

他们看起来不应该一样吗？

Answer 1

Shouldn't they look the same?

没有。使用对象边界框坐标时，基本上是将 1x1 正方形转换为矩形。因此 0 到 1 坐标被拉伸以适合矩形。从而导致渐变也拉伸。

如果您希望它们看起来相同，您需要对 userSpaceOnUse 应用渐变变换，应用等效拉伸。

<svg width="500" height="500" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient id="user-grad" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100" y2="100" gradientTransform="scale(2, 1)">
          <stop stop-color="orange" offset="0"/>
          <stop stop-color="blue" offset="1"/>
        </linearGradient>
        <linearGradient id="box-grad" x1="0" y1="0" x2="1" y2="1">
          <stop stop-color="orange" offset="0"/>
          <stop stop-color="blue" offset="1"/>
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="200" height="100" fill="url(#user-grad)"/>
    <rect x="250" y="0" width="200" height="100" fill="url(#box-grad)"/>    
</svg>

SVG 线性渐变 objectBoundingBox 与 userSpaceOnUse

SVG linear gradients objectBoundingBox vs userSpaceOnUse

svg

linear-gradients