Как заполнить несколько путей SVG одним градиентом?

Вот пример с группой из двух путей, заполненной градиентом.

<svg height = "1000" width = "1400">
    <defs>
      <linearGradient id = "lingrad" x1 = "0%" y1 = "0%" x2 = "100%" y2 = "0%">
        <stop offset = "0%" stop-color = "red" />
        <stop offset = "100%" stop-color = "green" />
      </linearGradient>
    </defs>

    <g fill = "url(#lingrad)">
      <path d = "M501.333,490.667H10.667C4.779,490.667,0,495.445,0,501.333C0,507.221,4.779,512,10.667,512h490.667
        c5.888,0,10.667-4.779,10.667-10.667C512,495.445,507.221,490.667,501.333,490.667z"/>

      <path d = "M96,362.667H32c-5.888,0-10.667,4.779-10.667,10.667v128C21.333,507.221,26.112,512,32,512h64
        c5.888,0,10.667-4.779,10.667-10.667v-128C106.667,367.445,101.888,362.667,96,362.667z M85.333,490.667H42.667V384h42.667
        V490.667z"/>
    </g>
  </svg>

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

Как заполнить все пути одним общим градиентом?

html css svg path gradient

01.11.2018 13:57

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

138

Ответы 2

Просто создав один путь. Просто добавьте тег d одного пути к тегу d другого пути:

<path d = "M501.333,490.667H10.667C4.779,490.667,0,495.445,0,501.333C0,507.221,4.779,512,10.667,512h490.667
        c5.888,0,10.667-4.779,10.667-10.667C512,495.445,507.221,490.667,501.333,490.667z"/>

<path d = "M96,362.667H32c-5.888,0-10.667,4.779-10.667,10.667v128C21.333,507.221,26.112,512,32,512h64
        c5.888,0,10.667-4.779,10.667-10.667v-128C106.667,367.445,101.888,362.667,96,362.667z M85.333,490.667H42.667V384h42.667
        V490.667z"/>

<svg height = "1000" width = "1400">
  <defs>
    <linearGradient id = "lingrad" x1 = "0%" y1 = "0%" x2 = "100%" y2 = "0%">
      <stop offset = "0%" stop-color = "red" />
      <stop offset = "100%" stop-color = "green" />
    </linearGradient>
  </defs>

    <g fill = "url(#lingrad)">
        <path d = "M501.333,490.667H10.667C4.779,490.667,0,495.445,0,501.333C0,507.221,4.779,512,10.667,512h490.667
            c5.888,0,10.667-4.779,10.667-10.667C512,495.445,507.221,490.667,501.333,490.667zM96,362.667H32c-5.888,0-10.667,4.779-10.667,10.667v128C21.333,507.221,26.112,512,32,512h64
            c5.888,0,10.667-4.779,10.667-10.667v-128C106.667,367.445,101.888,362.667,96,362.667z M85.333,490.667H42.667V384h42.667
            V490.667z"/>
    </g>
</svg>

01.11.2018 14:11

Определите размеры градиента не относительно ограничивающего прямоугольника объекта (для отдельных форм по умолчанию используется gradientUnits = "objectBoundingBox"), а относительно локальной системы координат элемента <g> (gradientUnits = "userSpaceOnUse").

<svg height = "1000" width = "1400">
    <defs>
      <linearGradient id = "lingrad" x1 = "0" y1 = "0" x2 = "512" y2 = "0" gradientUnits = "userSpaceOnUse">
        <stop offset = "0%" stop-color = "red" />
        <stop offset = "100%" stop-color = "green" />
      </linearGradient>
    </defs>

    <g fill = "url(#lingrad)">
      <path d = "M501.333,490.667H10.667C4.779,490.667,0,495.445,0,501.333C0,507.221,4.779,512,10.667,512h490.667
        c5.888,0,10.667-4.779,10.667-10.667C512,495.445,507.221,490.667,501.333,490.667z"/>

      <path d = "M96,362.667H32c-5.888,0-10.667,4.779-10.667,10.667v128C21.333,507.221,26.112,512,32,512h64
        c5.888,0,10.667-4.779,10.667-10.667v-128C106.667,367.445,101.888,362.667,96,362.667z M85.333,490.667H42.667V384h42.667
        V490.667z"/>
    </g>
  </svg>

01.11.2018 15:48

Другие вопросы по теме

Не работает панель навигации начальной загрузки с <ul class = "nav nav-sidebar"> в Laravel 5.6

Почему эта кодировка некорректно работает в IE?

Переход сова-карусель назад

Как разрешить копирование и вставку из всплывающего окна расширения в Firefox?

Добавление пробелов в столбце Semantic UI

Есть ли способ использовать href = "tel" в CSS?

Выгрузить обработчик событий fakeLoader.js, чтобы он загружался при каждом нажатии кнопки

Только сворачиваемый список CSS - элементы списка переполнены <ul>

Как загрузить / использовать два фона с помощью HTML и CSS

Bootstrap 4 вертикально центрирует текст в div

Как заполнить несколько путей SVG одним градиентом?

Ответы 2

Другие вопросы по теме

Похожие вопросы