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

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

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

如果希望它们看起来相同，则需要对您的梯度应用gradientTransform，以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>