SVG线性渐变objectBoundingBox与userSpaceOnUse [英] SVG linear gradients objectBoundingBox vs userSpaceOnUse

问题描述

我正在制作两个渐变:一个在objectBoundingBox单元中，另一个在userSpaceOnUse中.这样做的目的是使它们看起来相同.但是它们又有所不同.这是svg文件.

I am making two gradients: one in objectBoundingBox units and another in userSpaceOnUse. The idea is to make them look the same. But somehow they are different. Here is the svg file.

<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>

这是它的样子

他们看起来不一样吗?

推荐答案

他们看起来不一样吗?

Shouldn't they look the same?

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

No. When using object bounding box coordinates, you are basically transforming a 1x1 square onto your rectangle. So the 0 to 1 coordinates are stretched to fit the rectangle. Thus causing the gradient to stretch also.

如果希望它们看起来相同，则需要在您的userSpaceOnUse上应用gradientTransform，以应用等效的拉伸.

If you want them to look the same, you would need to apply a gradientTransform, to your userSpaceOnUse one, that applies the equivalent stretch.

<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！