SVG линейные градиенты objectBoundingBox против userSpaceOnUse - PullRequest
Новая
       64

SVG линейные градиенты objectBoundingBox против userSpaceOnUse

0 голосов
/ 31 мая 2018

Я делаю два градиента: один в единицах 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>

Вот как это выглядит

enter image description here

Разве они не должны выглядеть одинаково?

1 Ответ

0 голосов
/ 31 мая 2018

Разве они не должны выглядеть одинаково?

Нет.Используя координаты ограничивающего прямоугольника объекта, вы в основном трансформируете квадрат 1x1 в прямоугольник.Таким образом, координаты от 0 до 1 растягиваются, чтобы соответствовать прямоугольнику.Таким образом, заставляя градиент также растягиваться.

Если вы хотите, чтобы они выглядели одинаково, вам нужно применить градиентTransform к вашему 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>
...