SVG
Градиенты

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
Поиск…


параметры

общий определение
GradientUnits система координат атрибутов градиента. Любой объектBoundingBox или userSpaceOnUse
gradientTransform преобразование, применимое к содержимому градиента
spreadMethod определяет, что происходит вне границ градиента. Либо пэд, либо отражать, либо повторять
XLink: HREF ссылка на другой градиент, который предоставляет атрибуты или контент
------ ------
Линейный градиент Определение
------ ------
x1 определяет вектор градиента
x2 см. x1
y1 см. x1
y2 см. x1
------ ------
Радиальный градиент Определение
------ ------
сх координата x внешнего центра градиента
су координата y внешнего центра градиента
р внешний радиус градиента. Расположение стоп-стоп
FX координата x центра внутреннего градиента. Место остановки 0%
FY местоположение y центра внутреннего градиента. Место остановки 0%

замечания

SVG чувствителен к регистру, поэтому не забудьте использовать столицу G посередине.

LinearGradient

<svg>
  <defs>
        <linearGradient id='g' y1="100%" x2="100%">
            <stop offset='0%' stop-color='yellow' />
            <stop offset='100%' stop-color='green' />
        </linearGradient>
    </defs>
    <rect width='100%' height='100%' fill='url(#g)'/>
</svg>

RadialGradient

<svg>
  <defs>
    <radialGradient id="g">
      <stop offset="10%" stop-color="green" />
      <stop offset="90%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect width='100%' height='100%' fill='url(#g)'/>
</svg>


Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow