Svg linear gradient: — SVG: Scalable Vector Graphics

Разметка для него выглядит следующим образом:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <style>.eye{fill:#211533; fill-opacity: 0.5;}</style>

  <defs>
                <linearGradient x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" />
                  <stop offset="50%" />
                  <stop offset="100%" />
                </linearGradient>
  </defs>

  <g fill="url(#bones-gradient)">
                  <path d="..."/>

                  <path d="..."/>
  </g>

  <g>
    <path d="..."/>
    <path d="..."/>
  </g>
</svg>

Последний пример – мы используем градиент под другим углом:

Вот его разметка:

<svg xmlns="http://www. w3.org/2000/svg" viewBox="0 0 200 200">
  <style>.eye{fill:#F9EC31;}</style>

  <defs>
                <linearGradient x1="0%" y1="0%" x2="50%" y2="100%">
                  <stop offset="0%" />
                  <stop offset="100%" />
                </linearGradient>
  </defs>

  <g fill="url(#bones-gradient)">
                  <path d="..."/>

                  <path d="..."/>
  </g>

  <g>
    <path d="...."/>
    <path d="..."/>
  </g>
</svg>

Как видите, создать линейный градиент в SVG довольно легко.

Читайте также: Как создать радиальный градиент в SVG

Карманное руководство по написанию SVG. Глава 6 — CSS-LIVE

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Глава 6.

Градиенты

Существует два типа SVG-градиентов: линейные и радиальные. У линейных градиентов переход между цветами происходит вдоль прямой линии, а у радиальных — в круге.

Очень простой линейный градиент имеет вот такую структуру:

<svg>
    <defs>
        <linearGradient>
            <stop offset="<%>" stop-color="<color>" />
            <stop offset="<%>" stop-color="<color>" />
        </linearGradient>
    </defs>
</svg>

<svg> содержит элемент <defs>,позволяющий создавать повторно используемые определения, к которым можно обратиться позже. Эти определения не отображаются (визуально) до тех пор, пока они не будут вызваны по их уникальному id в атрибутах обводки и/или заливке для SVG-фигур или

Как только градиент создан и ему задано ID, к нему можно обратиться через атрибуты fill и/или stroke в SVG. Например: fill= "url(#gradientName)".

Линейные градиенты

Линейные градиенты изменяют цвет равномерно вдоль прямой линии и каждая ключевая точка, которая определена на этой линии, будет представлять соответствующий цвет в пределах элемента <linearGradient>. В каждой точке цвет является на 100% чистым, в промежуточных точках — смесь в разном соотношении, а область между ними отображает переход от одного цвета к другому.

Элементы stop

Элементам <stop> также можно задавать прозрачность при помощи stop-opacity="<значение>"

Ниже представлен код для простого линейного градиента с двумя ключевыми точками, которые применены к прямоугольнику:

<svg>
    <defs>
        <linearGradient x1="0" y1="0" x2="100%" y2="0">
            <stop offset="0%" stop-color="#BBC42A" />
            <stop offset="100%" stop-color="#ED6E46" />
        </linearGradient>
    </defs>
    <rect x="2" y="2" fill= "url(#Gradient1)" stroke="#333333" stroke-width="4px" />
</svg>

Посмотреть демо можно здесь

offset передаёт градиенту, в какой точке установить соответствующий stop-color.

x1, y1, x2, y2

Значения атрибутов x1, y1, x2 и y2 определяют начальные и конечные точки, к которым привязаны ключевые точки градиента. Эти процентные значения размещают градиенты как надо вдоль нужных осей.

Если атрибуту x2 задать значение «100%», а атрибуту y2 — «0», то мы получим горизонтальный градиент (при x1 и y1, равных нулю — прим. перев.), а если наоборот — вертикальный. Установив оба значения в «100%» (или в любое значение отличное от 0), мы получим наклонный градиент.

gradientUnits

Атрибут gradientUnits определяет систему координат для значений x1, x2, y1 и y2. Для него возможны два значения: «userSpaceOnUse» или «objectBoundingBox». userSpaceOnUse устанавливает систему координат градиента в абсолютных единицах, а objectBoundingBox (значение по умолчанию) создаёт эту систему в границах самой фигуры SVG, целевого объекта.

spreadMethod

Значение атрибута spreadMethod указывает, как распространится градиент по фигуре, если он начинается или заканчивается внутри границ объекта. Если градиенту указано не закрашивать фигуру целиком, то spreadMethod определяет, как должен распространиться градиент, покрывая эту пустую область. Для этого атрибута возможны три значения: «pad», «repeat» или «reflect».

Значение pad (по умолчанию) указывает первому и последнему цвету градиента распространиться по всей оставшейся непокрытой областью объекта. repeat указывает градиенту повторять паттерн, постоянно начиная заново. Значение reflect отражает паттерн градиента, повторяясь поочередно то от начала к концу, то от конца к началу.

Начальной и конечной точкой для градиента ниже является: x1=«20%» y1=«30%» x2=«40%» y2=«80%».

gradientTransform

Атрибут gradientTransform необязателен и предусматривает дальнейшую трансформацию градиента, прежде чем тот отобразится, например, добавление поворота.

xlink:href

Атрибут xlink:href позволяет обращаться к ID другого градиента, чтобы унаследовать его значения, но также можно включить различные значения.

<linearGradient xlink:href="#Gradient-1” spreadMethod="repeat" />

Этот градиент унаследовал значения первого градиента, который находится в начале этого раздела, но для него задано другое значение «spreadMethod».

Радиальные градиенты

Большинство атрибутов для <radialGradient> совпадают с атрибутами <linearGradient> кроме того, что для работы с ними существует другой набор координат.

cx, cy, r

Атрибуты cx, cy, и r определяют внешний край круга, а значение 100% stop-color градиента будет привязано к границе этого круга. cx и cy определяют координаты центра, а r устанавливает радиус градиента.

fx, fy

Атрибуты fx, fy представляют координаты фокальной точки градиента или внутреннего круга. Фактически, центр градиента не обязан также быть его фокальной точкой, которая может быть изменена при помощи этих значений.

Несмотря на то, что по умолчанию фокальная точка радиального градиента будет в центре, атрибуты для фокальной точки могут изменить это поведение. Значениями центральной точки на изображении ниже являются fx="95%" fy="70%".

<svg>
    <defs>
        <radialGradient cy="60%" fx="95%" fy="70%" r="2">
            <stop offset="0%" stop-color="#ED6E46" />
            <stop offset="10%" stop-color="#b4c63b" />
            <stop offset="20%" stop-color="#ef5b2b" />
            <stop offset="30%" stop-color="#503969" />
            <stop offset="40%" stop-color="#ab6294" />
            <stop offset="50%" stop-color="#1cb98f" /> 
            <stop offset="60%" stop-color="#48afc1" />
            <stop offset="70%" stop-color="#b4c63b" />
            <stop offset="80%" stop-color="#ef5b2b" />
            <stop offset="90%" stop-color="#503969" />
            <stop offset="100%" stop-color="#ab6294" />
        </radialGradient>
    </defs>
    <text x="20%" y="75%" fill= "url(#Gradient2)" font-family= "'Signika', sans-serif" font-size="200">Cherry</text>
</svg>

Посмотреть демо можно здесь

В этом примере фокальная точка смещена к правому нижнему краю изображения.

Паттерны

Как правило, паттерны считаются одним из самых сложных вариантов закрашивания, доступных для цвета заливок и обводок SVG. Понимание основы и базового синтаксиса могут сделать эти, казалось бы, более сложные паттерны гораздо более доступными.

Ниже приведён синтаксис для базового паттерна, который применён к прямоугольнику:

<svg>
    <defs>
        <pattern x="10" y="10" patternUnits="userSpaceOnUse">
            <circle cx="20" cy="20" r="20" fill= "#BBC42A" />
        </pattern>
    </defs>
    <rect x="10" y="10"
                stroke="#333333" stroke-width="2px" fill="url(#basicPattern)" /> 
</svg>

Посмотреть демо можно здесь

Базовые атрибуты

Атрибуты и значения для паттернов определяют «холст», дизайн и позиционирование в целом. Паттерны состоят из контуров и/или фигур, также могут закрашивать текст и даже быть вложенными в другие паттерны.

x, y, width, height

Атрибуты x и y в элементе <pattern> определяют в какой точке начнётся паттерн внутри фигуры. Ширина и высота, используемые в элементе <pattern>, определяют фактическую ширину и высоту, отведённые для области паттерна.

Упомянутый выше «basicPattern» содержит следующие значения: x="10" y="10". В этом случае паттерн начнётся с 10px от начала оси х, 10px от начала оси y и создаст «холст» 40px ширины и такой же высоты.

patternUnits

Атрибут patternUnits определяет в каких координатах указываются значения x, y, ширина и высота. Здесь можно выбрать два значения: userSpaceOnUse и objectBoundingBox (по умолчанию).

При userSpaceOnUse система координат паттерна определяется системой координат элемента, ссылающегося на <pattern>, а objectBoundingBox берет в качестве системы координат для паттернов прямоугольник, описанный вокруг элемента, к которому паттерн применяется.

patternContentUnits

Значения атрибута patternContentUnits совпадают со значениями для patternUnits, за исключением того, что теперь система координат определяется для содержимого самого паттерна.

Для атрибута patternContentUnits, в отличие от patternUnits, значением по умолчанию является userSpaceOnUse, которое означает, что если не указаны один или оба из этих атрибутов, фигуры, отрисованные в <pattern>, рисуются не в той системе координат, которую использует <pattern>.

Определение patternUnits="userSpaceOnUse" в элементе <pattern> упрощает этот процесс и обеспечивает единообразную рабочую область.

Вложенные паттерны

Паттерны могут быть вложенными, чтобы создать еще более неповторимый и подробный дизайн.

Вот так выглядит структура базового вложенного паттерна:

<svg>
    <defs>
        <pattern
                 x="4" y="4"
                 patternUnits="userSpaceOnUse">
            <circle cx="12" cy="12" r="8"
                stroke="#ed6e46" stroke-width="3" fill="#765373" />
        </pattern>
        <pattern
                 x="10" y="10"
                 patternUnits="userSpaceOnUse">      
                <rect x="2" y="2"
                  stroke="#bbc42a" stroke-width="3" fill="url(#circlePattern)" />
        </pattern>
    </defs>
    <rect x="2" y="2"
          stroke="#333333" stroke-width="3" fill="url(#rectPattern)" /> 
</svg>

Элемент <defs> содержит оба паттерна. В <defs> паттерн для прямоугольника обращается к паттерну круга при помощи fill, а главный прямоугольник затем также обращается к паттерну прямоугольника через

Посмотреть демо можно здесь

Контуры обрезки

Контур обрезки ограничивает область, к которой будет применено закрашивание в SVG. Любая отрисованная область за пределами границ, установленными контуром обрезки, не будет отображаться.

Для демонстрации возможностей этой функции, давайте используем контур обрезки в виде текста «Apples», наложенный на прямоугольник цвета томата и зелёный круг.

К следующим фигурам не применён контур обрезки, но они настроены так, чтобы растягиваться за пределы области просмотра.

А теперь давайте взглянем на код, позволяющий применить текст «Apples» к этому «холсту».

<svg>
    <clipPath>
        <text x="0" y="50%" fill="#f27678" font-size="120px" font-family=" 'Signika', sans-serif">Apples</text> 
    </clipPath>      
    <rect x="0" y="0" fill="#ed6e46" clip-path="url(#clip-text)" />  
    <circle cx="310" cy="100" r="135" fill="#bbc42a" clip-path="url(#clip-text)" />    
</svg>

Посмотреть демо можно здесь

Контур обрезки определяется в элементе <clipPath>, а затем вызывается обеими фигурами путём обращения к их уникальному id.

Заключение

Написание встроенного SVG дает очень полезные возможности редактирования и позволяет нам, как авторам, иметь полный доступ ко всем графическим элементам в отдельности. В этом коде мы генерируем графику, которая масштабируется без потери качества изображения, видна поисковикам и повышает доступность.

Скорее всего, вам придётся повозиться некоторое время, чтобы освоиться с написанием SVG, но как только вы этого достигнете, я бы порекомендовала поработать над тем, чтобы сделать ваш код настолько коротким и эффективным, насколько это возможно, поисследовать SMIL-анимацию и поэкспериментировать со стилизацией SVG-элементов при помощи CSS.

Надеюсь, это руководство стало как ценным справочником, так и вдохновением в плане понимания мощного потенциала построения и манипулирования встроенным SVG.

За новостями и обновлениями, пожалуйста, заходите на сайт книги. Если у вас есть какие-то вопросы или комментарии насчет книги, вы можете связаться со мной в твиттере или по почте info@jonibologna. com.

Публикуется под лицензией Attribution-NonCommercial-ShareAlike 4.0

P.S. Это тоже может быть интересно:

— SVG: масштабируемая векторная графика

Элемент позволяет авторам определять линейные градиенты для применения к другим элементам SVG.

 html,
тело,
свг {
  высота: 100%;
}
 

градиентные единицы

Этот атрибут определяет систему координат для атрибутов x1 , x2 , y1 , y2 Тип значения : userSpaceOnUse | объектBoundingBox ; Значение по умолчанию : objectBoundingBox ; Анимация : да

градиентПреобразование

Этот атрибут обеспечивает дополнительное преобразование системы координат градиента. Тип значения : <список-преобразования> ; Значение по умолчанию : преобразование идентичности ; Анимация : да

ссылка

Этот атрибут определяет ссылку на другой элемент , который будет использоваться в качестве шаблона. Тип значения : ; Значение по умолчанию : нет; Анимация : да

метод распространения

Этот атрибут указывает, как ведет себя градиент, если он начинается или заканчивается внутри границ фигуры, содержащей градиент. Тип значения : pad | отражение | повторить ; Значение по умолчанию : pad ; Анимация : да

x1

Этот атрибут определяет координату x начальной точки векторного градиента, вдоль которой рисуется линейный градиент. Тип значения : <процент длины> | <число> ; Значение по умолчанию : 0% ; Анимация : да

x2

Этот атрибут определяет координату x конечной точки векторного градиента, вдоль которой рисуется линейный градиент. Тип значения : <процент длины> | <число> ; Значение по умолчанию : 100% ; Анимация : да

ссылка: href

Устарело: Эта функция больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему поддерживать его, возможно, он уже удален из соответствующих веб-стандартов, может находиться в процессе исключения или может быть сохранен только в целях совместимости. Избегайте его использования и обновляйте существующий код, если это возможно; см. таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любой момент.

Ссылка на другой элемент , который будет использоваться в качестве шаблона. Тип значения : ; Значение по умолчанию : нет; Анимация : да

у1

Этот атрибут определяет координату y начальной точки векторного градиента, вдоль которого рисуется линейный градиент. Тип значения : <процент длины> | <число> ; Значение по умолчанию : 0% ; Анимация : да

у2

Этот атрибут определяет координату y конечной точки векторного градиента, вдоль которой рисуется линейный градиент. Тип значения : <процент длины> | <число> ; Значение по умолчанию : 0% ; Анимация : да

Глобальные атрибуты

Основные атрибуты

В частности: id

Атрибуты стиля

класс , стиль

Атрибуты событий

Атрибуты глобальных событий, Атрибуты событий элементов документа

Атрибуты презентации

В частности: clip-path , клип-правило , цвет , интерполяция цвета , цветопередача , курсор , дисплей , заливка 0-90 непрозрачность 004 правило заполнения , фильтр , маска , непрозрачность , указатели-события , рендеринг формы , штрих , штрих-dasharray ,

4 штрих-тире 9 000004 штрих-тире

, линия соединения , Stroke-miterlimit , Stroke-Opacity , Stroke-Width , Transform , Vector-Effect , Видимость

Атрибуты XLink

xlink:href , xlink:название

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

Обнаружили проблему с содержанием этой страницы?

• Редактировать страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Посмотреть исходный код на GitHub.

Хотите принять больше участия?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 6 марта 2023 г. участниками MDN.

Линейные градиенты в SVG без определений

спросил 11 лет, 6 месяцев назад

Изменено 4 года, 2 месяца назад

Просмотрено 7к раз

Я могу использовать линейный градиент в SVG с разделом defs, например:

  w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <определения>
    <линейный градиент
                    х1="0%" у1="0%"
                    х2="0%" у2="100%"
                    SpreadMethod="pad">
      
      
    
  
  <прямо х="0" у="0"
     />

 

Могу ли я использовать линейный градиент без раздела defs? Я нахожу что-то вроде этого:

• svg
• градиент
• линейный градиент

1

нужен только для целей структурирования, элементы в нем не отображаются, но так как градиент может быть виден только при применении к фигуре или другому элементу, то определить его можно в любом месте документа.

Но вы все равно должны придерживаться правильного синтаксиса: