SVG 线性渐变 objectBoundingBox 与 userSpaceOnUse答案

【问题标题】：SVG linear gradients objectBoundingBox vs userSpaceOnUseSVG 线性渐变 objectBoundingBox 与 userSpaceOnUse
【发布时间】：2018-05-31 05:33:16
【问题描述】：

我正在制作两个渐变：一个在 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>

这是它的样子

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

【问题讨论】：

标签： svg linear-gradients

【解决方案1】：

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

没有。使用对象边界框坐标时，您基本上是将 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>

【讨论】：