Содержание

группировка и переиспользование элементов • Про CSS

Содержание:
g
defs
symbol
use

SVG-фигуры можно группировать, чтобы удобно структурировать файл. Для этих целей существует несколько тегов: g, defs и symbol. Элементы, группы элементов и символы можно использовать повторно.

g

Тег g служит для группировки фигур по смыслу, чтобы поддерживать прозрачную структуру документа. Группа элементов может быть использована повторно.

<svg>
  <!-- Группа 1  -->
  <g>
    <circle fill="purple" r="20" cx="25" cy="25"/>
    <circle fill="crimson" r="20" cx="70" cy="25"/>
    <circle fill="red" r="20" cx="115" cy="25"/>
    <circle fill="orange" r="20" cx="160" cy="25"/>
    <circle fill="gold" r="20" cx="205" cy="25"/>
    <circle fill="yellow" r="20" cx="250" cy="25"/>
  </g>
  <!-- Группа 2 -->
  <g>
    <circle fill="greenyellow" r="20" cx="25" cy="70"/>
    <circle fill="yellowgreen" r="20" cx="70" cy="70"/>
    <circle fill="green" r="20" cx="115" cy="70"/>
    <circle fill="steelblue" r="20" cx="160" cy="70"/>
    <circle fill="darkviolet" r="20" cx="205" cy="70"/>
    <circle fill="purple" r="20" cx="250" cy="70"/>
  </g>
</svg>

Группе, как и фигурам, можно задавать заливку и рамки. Стиль будет работать для фигур внутри группы, у которых нет своего стиля:

<svg>
  <!-- Красные фигуры -->
  <g fill="tomato">
    <ellipse rx="30" ry="10" cx="25" cy="25"
             transform="rotate(-45 25 25)"/>
    <ellipse rx="30" ry="10" cx="105" cy="25"
             transform="rotate(-45 105 25)"/>
  </g>
  <!-- Голубые фигуры -->
  <g fill="skyblue">
    <ellipse rx="30" ry="10" cx="65" cy="25"
             transform="rotate(45 65 25)"/>
    <ellipse rx="30" ry="10" cx="145" cy="25"
             transform="rotate(45 145 25)"/>
  </g>
</svg>

Группы работают не как вложенные элементы в HTML, а скорее как группировка элементов в графических редакторах.

Группы никак не проявляют себя визуально, но могут быть использованы для групповых операций над своим содержимым: можно применять трансформации сразу для группы элементов, без необходимости двигать их по одному, можно задать визуальное оформление всей группе сразу, и его унаследуют все элементы внутри группы. При этом свойства группы добавляются внутренним элементам, не переопределяя существующие. Например, если у элемента заливка красная, а у группы зеленая, — заливка элемента останется красной.

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

defs

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

<svg>
  <!-- Скрытый контейнер для эффектов и фигур -->
  <defs>
    <!-- Группа градиентов -->
    <g>
      <linearGradient x1="0%" y1="0%" x2="90%" y2="90%">
        <stop stop-color="crimson" offset="0%"/>
        <stop stop-color="gold" offset="100%"/>
      </linearGradient>
      <linearGradient x1="0%" y1="0%" x2="90%" y2="90%">
        <stop stop-color="yellowgreen" offset="0%"/>
        <stop stop-color="green" offset="100%"/>
      </linearGradient>
    </g>
    <!-- Группа фигур.
Она не отображается на странице --> <g> <circle fill="url(#g1)" r="50"/> <rect fill="url(#g2)"/> </g> </defs> <!-- Использование фигур --> <use xlink:href="#sun" x="120" y="60"/> <use xlink:href="#rect" x="0" y="110" transform="rotate(10 100 110)"/> </svg>

symbol

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

defs, не отображается на странице, и так же, как g, может быть использована ещё раз. Внутри символа действует своя система координат.

<svg>
  <defs>
    <g>
      <circle fill="gold" r="30"/>
    </g>
    <!-- Описание символа -->
    <symbol>
      <polyline points="15 15 5 10 15 5"
        stroke="crimson" fill="none" stroke-width="3"/>
    </symbol>
    <!-- Описание символа -->
    <symbol>
      <g stroke="brown">
        <polyline points="0 0 0 25" stroke-width="3"
          transform="translate(25 100)"/>
        <polyline points="0 0 0 25" stroke-width="3"
          transform="translate(45 100)"/>
        <polyline points="0 0 12 0" stroke-width="3"
          transform="translate(19 125)"/>
        <polyline points="0 0 12 0" stroke-width="3"
          transform="translate(40 125)"/>
      </g>
      <use xlink:href="#mouth" x="83" y="35"/>
      <use xlink:href="#yellowball" x="90" y="55"
        transform="scale(.
75)"/> <use xlink:href="#yellowball" x="35" y="75"/> <polyline points="55 70 45 90 20 80" stroke="orange" stroke-width="3" fill="none"/> <circle fill="black" r="5" cx="75" cy="35"/> <circle fill="gray" r="1" cx="77" cy="35"/> </symbol> </defs> <!-- Использование символа --> <use xlink:href="#bird" x="15" y="15"/> <!-- Ещё раз используем символ, повернув его по горизонтали --> <use xlink:href="#bird" x="0" y="35" transform="translate(225 -20) scale(-1,1)"/> </svg>

use

Тег, позволяющий переиспользовать SVG-элементы. Можно копировать любые элементы внутри одной HTML-страницы. Также можно подключить библиотеку элементов в начале страницы, а затем использовать их в нужных местах.

Копии можно задать положение, ширину и высоту:

<svg>
  <defs>
    <!-- Создаем символ -->
    <symbol>
      <circle r="50" fill="gold" cx="50" cy="50"/>
      <circle r="35" fill="orangered" cx="50" cy="50"/>
      <circle r="20" fill="crimson" cx="50" cy="50"/>
      <circle r="5" fill="maroon" cx="50" cy="50"/>
     </symbol>
  </defs>
  <!-- Копия символа с координатами -->
  <use xlink:href="#color-wheel" x="20" y="20"/>
  <!-- Копия символаы с координатами и высотой -->
  <use xlink:href="#color-wheel" x="140" y="20"/>
</svg>

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

При вставке символа ширина и высота (width и height) определяют не размеры фигуры, а видимую область копии (как у правой фигуры), однако при копировании группы (g) ширина и высота ни на что не влияют. Для изменения размеров копии используйте трансформации.

Также можно задавать обводку, заливку и трансформации:

<svg>
  <defs>
    <!-- Исходный символ, не отображается -->
    <symbol>
      <rect x="2" y="2"/>
     </symbol>
  </defs>
  <!-- Просто копия, цвет фона по умолчанию — черный -->
  <use xlink:href="#s-rect" x="20" y="20"/>
  <!-- Добавили ширину и фон -->
  <use xlink:href="#s-rect" x="140" y="20"
       fill="yellowgreen"/>
  <!-- Добавили фон и обводку -->
  <use xlink:href="#s-rect" x="20" y="80"
       fill="gold" stroke="orange" stroke-width="4"/>
  <!-- Добавили фон, обводку и трансформацию -->
  <use xlink:href="#s-rect" x="140" y="80"
       fill="skyblue" stroke="steelblue" stroke-width="2"
       transform="rotate(-25 190 92)"/>
</svg>

Копиям можно задавать разные классы:

Домик с icomoon. io

<svg>
  <style>
 .col-1 {
    fill: #F35C78;
    }
  .col-2 {
    fill: #E77D6D;
    }
  .col-3 {
    fill: #D99B64;
    }
  .col-4 {
    fill: #C8B357;
    }
  .col-5 {
    fill: #B2CC49;
    }
  </style>
  <defs>
    <!-- Домик -->
    <path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"/>
  </defs>
  <!-- Копии домика -->
  <use xlink:href="#house"
      
       x="20" y="10"
       transform="rotate(35 36 26)"/>
  <use xlink:href="#house"
      
       x="67" y="10"
       transform="rotate(100 83 26)"/>
  <use xlink:href="#house"
      
       x="114" y="10"
       transform="rotate(140 130 26)"/>
  <use xlink:href="#house"
      
       x="161" y="10"
       transform="rotate(30 177 26)"/>
  <use xlink:href="#house"
      
       x="208" y="10"
       transform="rotate(100 224 26)"/>
</svg>

Хорошо структурированный файл сделает разработку быстрее и комфортнее, а копирование символов может сделать код значительно короче.

Ссылки по теме:
Document Structure
Structuring, Grouping, and Referencing in SVG – The <g>, <use>, <defs> and <symbol> Elements
Метки:
SVG

←SVG-фигуры и трансформацииSVG-path→

Наверх

SVG g defs символ использовать элемент подробное объяснение

SVG означает масштабируемую векторную графику. SVG использует формат XML для определения изображений.

g означает сгруппированные элементы, объединяет несколько элементов в группы, чтобы реализовать общую работу нескольких элементов, таких как: перемещение, вращение и т. д .;

defs реализует определения элементов, определенные элементы не отображаются непосредственно на монтажной области, а элементы, определенные с помощью desf, g и symbol, повторно используются посредством использования для достижения повторного использования элементов;

Символ имеет как функцию группировки <g>, так и начальную невидимую функцию <defs>. В то же время viewbox и preserveAspectRatio могут использоваться для рисования графики в виртуальной системе координат.

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

Примеры данных элементов:

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
       >
    <g fill="red" transform="translate(50)rotate(110)">
      <rect x="10" y="10" />
      <rect x="120" y="10" />
    </g>
  </svg>

Пример использования мультиплексированного g:

<svg xmlns="http://www.w3.org/2000/svg"  version="1.1">
    <g fill="red" >
      <rect x="10" y="10"/>
    </g>
    <use x="0" y="110" xlink:href="#group"/>
    <use x="0" y="220" xlink:href="#group" stroke="black" stroke-width="2"/>
  </svg>

Примечания: использовать в использованииАтрибут xlink: href относится к идентификатору соответствующего элемента, который будет использоваться повторно. Используемые координаты x и y представляют собой координаты смещения относительно начальных координат, определенных исходной графикой, что эквивалентно использованию transform = «translate (x, y)»

пример defs:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <rect
           
            x="90" y="110"
            />
    </defs>
  
    <use
         transform="translate(0 110) rotate(10 0 0)"
         fill="red"
         xlink:href="#defs" />
    <rect
          fill="blue"
          x="90" y="220"
         
          transform="rotate(10 0 110)"
          fill-opacity="0.5" />
  </svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <g>
            <rect x="50" y="50" fill="#69C" stroke="red" stroke-width="2"/>
            <circle cx="100" cy="100" r="40" stroke="#00f" fill="none" stroke-width="5"/>
        </g>
    </defs>
    <use xlink:href="#ShapeGroup" transform="translate(-10,0) scale(0. 5)"/>
    <use xlink:href="#ShapeGroup" transform="translate(10,10) scale(1)"/>
    <use xlink:href="#ShapeGroup" transform="translate(50,60) scale(1.5)"/>
</svg>

Пример символа:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <symbol viewBox="0 0 250 250">
      <rect x="90" y="110" />
    </symbol>
  
    <use
         transform="translate(0 110) rotate(10 0 0)"
         fill="red"
         xlink:href="#symbol" />
    <rect
          fill="blue"
          x="90" y="220"
         
          transform="rotate(10 0 110)"
          fill-opacity="0.5" />
  
  </svg>

 


Интеллектуальная рекомендация

Caused by: org.springframework.beans.factory.BeanCreationException: Could not autowire field

1 Описание ошибки повествование 2 Причина ошибки Анализ информации, напечатанной консоли. Юнит Единый Тест. Существует только интерфейс DAO, который не записывает его; метод вызова интерфейса DAO при . ..

Запрос на расширение метода аннотации Mybatis

Расширяйте сложные методы запросов на основе кода, автоматически сгенерированного генератором Во-первых, используйте аннотацию @SelectProvider Аннотация @SelectProvider используется для генерации опер…

Linux использует функцию разбиения awk для удаления части поля в файле

Вот файл следующим образом: Мне нужно удалить предыдущую полосу, поэтому давайте проанализируем идею использования оболочки для решения проблемы. Команды grep и sed извлекаются для всей строки содержи…

Научите, как использовать расширенный текстовый редактор Baidu Ueditor и загружать изображения / файлы вне проекта (пользовательский путь загрузки ueditor)

очертание UEditor — это веб-редактор WYSIWYG с расширенным набором текстовых файлов, разработанный веб-интерфейсом отдела исследований и разработок Baidu. Он легкий, настраиваемый и ориентирован на ра…

Исследование схемы CDN на ресурсах Magento

Благодаря пониманию Magento было обнаружено, что файлы ресурсов Magento в основном распространяются в трех папках: media, js и skin. В папку media в основном входят ресурсы, относящиеся ко всем редакт…

Вам также может понравиться

Используйте LocalCheckPoint, чтобы ускорить итеративную расчет искры (линия разрыва)

Расчет искры и итерации Spark -это вычислительная структура на основе линии. Он записывает все операции с момента загрузки через линию, чтобы Spark мог легко реализовать ленивое выполнение. С другой с…

Установите двойные версии JDK1.8 и JDK11 в Mac и переключайтесь произвольно

Сначала загрузите установочные пакеты JDK8 и JDK11 с официального сайта и откройте bash после установки. Вы можете видеть, что две версии успешно установлены Затем отредактируйте переменную среды Тепе…

Класс упаковки MySQLDB от Python (Transfer)

От: http://blog.csdn.net/serverxp/article/details/6958459    …

Python поднимается в логотип и вправо от информации домашней страницы Baidu

Следующий код реализован в ноутбуке Jupyter Результат:…

uva12325 сундук с сокровищами

Классификационные методы перечисления, мы можем использовать различные методы перечисления в зависимости от размера диапазона S1 и S2. 1. Если значение N / s2 (N / s1) небольшое, укажите количество s2…

Описание и примеры стандартных функций SVG

Доминирующей причиной появления этого блога стало незаслуженное забвение на целых десять лет языка разметки масштабируемой векторной графики – SVG (Scalable Vector Graphics), входящего в подмножество расширяемого языка разметки XML.
Стандарт SVG 1.0 был принят в качестве спецификации Консорциумом Всемирной паутины (W3C) в сентябре 2001 г. Стандарт SVG 1.1 и его версии SVG mobile profiles (SVG Basic and SVG Tiny) были приняты консорциумом в качестве рекомендации в январе 2003 г.
Сейчас ведутся работы по созданию стандарта SVG 2.0

Основные преимущества формата SVG.

Я не буду долго распространяться о преимуществах векторной графики перед растровой в вебдизайне, замечу лишь, что, однажды созданный, файл в формате SVG одинаково хорошо выглядит без потери качества и на мобильном устройстве и на станционарном мониторе домашнего ПК.
Шапка данного сайта выполнена в формате SVG, попробуйте уменьшить окно браузера до минимальных размеров, картинка на “лету” будет также пропорционально уменьшаться.
SVG – это двухмерная графика и тем не менее это текстовый формат, который можно легко править в блокноте или просто рисовать в векторных редакторах: Incscape , Adobe illustrator, CorelDRAW

Бесконечное полотно документа svg.

Итак, как происходит формирование векторного изображения.
Документ формата SVG – это двухмерный объект, который может иметь бесконечные координаты, как в положительном, так и в отрицательном направлении по осям X и Y. Также документ SVG имеет две области просмотра: viewport – системная область просмотра и viewBox – пользовательская область просмотра, положение которой относительно начала системных координат viewport, может задаваться собственной, пользовательской системой координат. Другими словами окно просмотра viewBox, может быть перемещёно в любое место документа SVG, при этом берется фрагмент изображения под ним, который после процесса согласования между viewBox и viewport, возвращается обратно в системную область просмотра viewport, которую видит пользователь. Используя это свойство можно организовать вертикальную или горизонтальную прокрутку изображения, меняя параметры координат viewBox.

При уменьшении размера пользовательского окна просмотра viewbox можно пропорционально увеличивать фрагмент изображения в системной области просмотра или уменьшать его при увеличении размера viewbox.
Таким образом реализуется эффект лупы. Более подробно эти процессы разобраны в статье: Трансформация изображений SVG при изменении параметров Viewbox.

 

Взаимодействие SVG, XML с HTML, CSS, Jscript

В SVG, как и в HTML можно добавлять ссылки на внешние ресурсы. Но если в HTML одна картинка может служить только для одной внешней ссылки, то в SVG документ можно добавлять сколько угодно внешних ссылок . Картинка кликабельна.
Внутрь HTML страницы легко встраивается код SVG документа или целиком подключается внешний SVG файл. Можно наоборот, внутри SVG файла разместить код HTML внутри тегов foreignObject. Получаются интересные эффекты: Внутри SVG файла находится работающий внешний HTML сайт. К SVG формату можно подключать внешние таблицы стилей CSS 2.0, что позволяет управлять сразу несколькими файлами *.svg. Также вполне допустимо подключение стилей внутри файла *.svg внутри тегов style или использовать внутренние стили непосредственно внутри командных строк фигур и путей.
SVG, как любой основанный на XML формат, позволяет использовать для его обработки таблицы трансформации (XSLT).
Преобразуя XML-данные в SVG с помощью простого XSL, можно получить графическое представление текстовых данных, например визуализировать графики, круговые диаграммы, гистограммы и т.д.

Анимация и интерактивность SVG.

Анимация в SVG осуществляется при помощи языка SMIL (Synchronized Multimedia Integration Language). Также поддерживаются скриптовые языки на основе спецификации ECMAScript — это встраиваемый расширяемый язык программирования.
То есть всё находится в одном месте, внутри документа SVG, поэтому нет необходимости для подключения внешних библиотек.
На каждую отдельную фигуру или на целое изображение можно установить обработчик событий (клик, наведение мышки, нажатие клавиши и т. д), таким образом, пользователь может управлять рисунком. Наведите курсор мышки на кнопку“Start” на примере слева.
По событию mouseover на этой кнопке начнется анимация по команде begin=”startButton.mouseover” – движение цветных шариков по криволинейному пути. Закончится анимация либо через заданные в коде 16 секунд, либо в любой момент по наведению курсора мышки на цветные радиокнопки “Stop”. При этом каждая радиокнопка управляет своим объектом совпадающим по цвету. На рисунке ниже анимация начинается и заканчивается при нажатии клавиши мышки на кнопки GO и STOP. В этом случае работает событие click. Команда на запуск анимации – begin=”gO.click” и соответственно остановка – end=”stop.click”
Следующий пример анимации – плавная отрисовка картинки с нуля до полного изображения.

Уже встроенные в SVG языки программирования позволяют реализовать довольно сложные сценарии анимации. Но, в дополнение к этому есть еще более мощные средства для реализации интерактивности графики и ее анимации – это внешние библиотеки сторонних разработчиков: D3. js, BonsaiJS, Svg.js, Snapsvg.js

Еще примеры анимации ⇛

Недостатки SVG формата

  • С увеличением количества мелких деталей в изображении, быстрее растёт размер файла SVG-данных. Предельный случай — когда изображение представляет собой белый шум. В этом случае SVG не только не даёт никаких преимуществ в размере файла, но даже имеет проигрыш по отношению к растровому формату. На практике, SVG становится невыгоден уже задолго до того, как изображение дойдёт до стадии белого шума.
  • Трудность использования в крупных картографических приложениях из-за того, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.
  • В настоящее время SVG формат применяется в Интернете сравнительно мало, из-за недостаточной кроссбраузерности. Лучше всего обстоят дела у Mozilla Firefox со встроенным просмотрщиком SVG, так как ее разработчики находятся в рабочей группе Консорциума Всемирной паутины (W3C) по разработке и внедрению стандарта SVG. Хуже всего дела по поддержке формата SVG у Microsoft, которая покинула группу 2003 г. Для Internet Explorer – необходим Adobe SVG Viewer (ASV). С 9 версии IE частично поддерживает функции SVG.
    Браузеры Apple Safari, Google Chrome намного лучше поддерживают SVG, но не полностью, так как SVG – это большая спецификация (вдвое больше HTML 4.01), именно поэтому разработчики браузеров внедряют функции постепенно, от версии к версии. Но абсолютно все разработчики современных браузеров заявляют, что за форматом SVG будущее в области графики вебдизайна.


 

 

UPD. Добавлен новый раздел онлайн генераторы SVG кода path.
следующая: Структура SVG документа ⇛

svg.js Справочное руководство

svg.js Справочное руководство

Родительские элементы

SVG.Parent
Класс SVG.Parent является базовой оболочкой для всех элементов, которые могут содержать другие элементы. SVG.Parent наследуется непосредственно от самого нижнего уровня всех классов SVG. js: SVG.Element.
SVG.Container
SVG.Container добавляет в стек родительского наследования ещё один уровень. Куда SVG.Parent привносит некоторые низкоуровневые методы, такие как add(), remove() и has() Where `SVG.Parent` brings some low level methods like `add()`, `remove()` and `has()` to name a few, `SVG.Container` can and should be used if you want to add your own methods. That way the `SVG.Parent` prototype remains clean. SVG.Container может и должен использоваться для добавления своих собственных методов. Таким образом, прототип SVG.Parent остается чистым. При реализации своих собственных родительских элементов, они всегда должны наследовать от SVG.Container.

Стек родительского наследования: SVG.Element > SVG.Parent > SVG.Container.

SVG.Doc
Основная функция-инициализатор в SVG.js, создает корневой svg-узел в заданном элементе и возвращает экземпляр SVG.Doc.
SVG()

возвращает — SVG.Doc, который наследует от SVG.Container.

// javascript
var draw = SVG('drawing')

Примечание: При первом вызове SVG() будет создан второй невидимый <svg>. Это наш «парсер», как описано в ЧАсто задаваемых ВОпросах.


SVG.Nested
Вкладывает SVG-документы друг в друга.
nested() конструктор

конструктор на SVG.Container

возвращает — SVG.Nested, который наследует от SVG.Container.

Вложенные SVG-документы имеют точно такие же функции, как и основной SVG-документ верхнего уровня:

var nested = draw.nested()
var rect = nested.rect(200, 200)

SVG.G
Группирование элементов может быть полезно, если нужно изменять набор элементов, как если бы он был одним элементом. Все элементы в группе сохраняют свою позицию относительно группы, к которой они принадлежат.

Примечание: Группы не имеют собственных геометрических данных, они наследуется от их содержимого. Поэтому для группы нельзя получить атрибуты x, y, width и height. Если вы ищете именно, используйте взамен вложенный svg — nested().

group() конструктор

конструктор на SVG. Container

возвращает — SVG.G, который наследует от SVG.Container.

Группа имеет те же самые методы элемента, что и корневой SVG-документ:

var group = draw.group()
group.path('M10,20L30,40')

Элементы, уже существующие в SVG-документе, также могут быть добавлены в группу:

group.add(rect)

SVG.Symbol

конструктор на SVG.Container

возвращает — SVG.Symbol, который наследует от SVG.Container.

В отличие от элемента

group

, элемент

symbol

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

symbol

идеален в сочетании с элементом

use

:

var symbol = draw.symbol()
symbol.rect(100, 100).fill('#f09')
var use = draw. use(symbol).move(200, 200)

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

конструктор на SVG.Container

возвращает — SVG.Defs, который наследует от SVG.Container.

// javascript
var defs = draw.defs()

Определения (defs) также доступны от любого другого элемента через метод

doc()

:

// javascript
var defs = rect.doc().defs()

Узел (node) определений (defs) работает точно также, как и группы.

SVG.A
Создает гиперссылку (<a>), которая будет активирована на всех дочерних элементах.
link()  конструктор

конструктор на SVG.Container

возвращает — SVG.A, который наследует от SVG. Container.

Гиперссылка или тег

<a>

создает контейнер, который включает ссылку на все дочерние элементы:

var link = draw.link('http://svgdotjs.github.io/')
var rect = link.rect(100, 100)

URL-адрес ссылки может быть обновлен методом

to()

:

link.to('http://apple.com')

Кроме того, у элемента

link

имеется метод

show()

для создания атрибута

xlink:show

:

link.show('replace')

И метод

target()

для создания атрибута

target

:

link.target('_blank')

Также, элементы могут быть связаны другим способом, с помощью метода

linkTo()

:

rect. linkTo('http://svgdotjs.github.io/')

Кроме того, вместо URL-адреса для дополнительных параметров элемента ссылки, может быть передан блок:

rect.linkTo(function(link) {
  link.to('http://svgdotjs.github.io/').target('_blank')
})

SVG фильтры

SVG фильтры позволяют добавлять различные графические эффекты SVG графике.

<defs> и <filter>

Все SVG фильтры определяются внутри элемента <defs>. Элемент <defs> это сокращение от английского слова «definitions» (пер. «определения») и содержит определение специальных элементов (таких как фильтры).

Элемент <filter> предназначен для определения SVG фильтра. У элемента <filter> должен быть задан обязательный атрибут id, который идентифицирует фильтр. Графический объект затем указывает на этот фильтр.

Элементы SVG фильтров

В SVG доступны следующие элементы фильтров:

  • <feBlend> — фильтр для комбинирования изображений
  • <feColorMatrix> — фильтр для трансформации цветов
  • <feComponentTransfer>
  • <feComposite>
  • <feConvolveMatrix>
  • <feDiffuseLighting>
  • <feDisplacementMap>
  • <feFlood>
  • <feGaussianBlur>
  • <feImage>
  • <feMerge>
  • <feMorphology>
  • <feOffset> — фильтр для создания теней
  • <feSpecularLighting>
  • <feTile>
  • <feTurbulence>
  • <feDistantLight> — фильтр для освещения
  • <fePointLight> — фильтр для освещения
  • <feSpotLight> — фильтр для освещения

С любым элементом SVG можно использовать любое количество фильтров!

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

Эффект размытия

Фильтр <feGaussianBlur>.

Пример

Используем элемент <feGaussianBlur>, чтобы создать эффект размытия:

Ваш браузер не поддерживает HTML тег SVG.

SVG код:

<svg>
   <defs>
     <filter x="0" y="0">
       <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
     </filter>
   </defs>
   <rect stroke="green" stroke-width="3" fill="yellow" filter="url(#f0)" />
</svg> 

Объяснение:

  • Атрибут id элемента <filter> определяет уникальное имя фильтра
  • Эффект размытия создается при помощи элемента <feGaussianBlur>
  • Часть in=»SourceGraphic» определяет, что эффект создается для всего элемента
  • Атрибут stdDeviation определяет размер размытия
  • Атрибут filter элемента <rect> связывает ссылкой элемент с фильтром «f1»

Создание тени (<feOffset>)

Для создания эффекта тени используется элемент <feOffset>. Идея состоит в том, что берется графический объект SVG (изображение или графический элемент) и немного сдвигается в XY плоскостях.

Пример

Сначала сдвигается прямоугольник (при помощи элемента <feOffset>), а затем оригинальный прямоугольник накладывается на сдвинутое изображение (при помощи элемента <feBlend>):

Ваш браузер не поддерживает HTML тег SVG.

SVG код:

<svg>
   <defs>
     <filter x="0" y="0">
       <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
       <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
     </filter>
   </defs>
   <rect stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg> 

Объяснение:

  • Атрибут id элемента <filter> определяет уникальное имя фильтра
  • Атрибут filter элемента <rect> связывает ссылкой элемент с фильтром «f1»

Теперь сдвинутое изображение делаем размытым (при помощи элемента <feGaussianBlur>):

Ваш браузер не поддерживает HTML тег SVG.

SVG код:

<svg>
   <defs>
     <filter x="0" y="0">
       <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
       <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
     </filter>
   </defs>
   <rect stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)" />
</svg> 

Объяснение:

  • Атрибут stdDeviation элемента <feGaussianBlur> определяет размер размытия

Теперь делаем тень черной:

Ваш браузер не поддерживает HTML тег SVG.

SVG код:

<svg>
   <defs>
     <filter x="0" y="0">
       <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
       <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
     </filter>
   </defs>
   <rect stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)" />
</svg> 

Объяснение:

  • Значение атрибута in элемента <feOffset> изменено на «SourceAlpha», которое использует альфа-канал вместо всего RGBA набора пикселя для создания размытия

Теперь обработаем тень как цвет:

Ваш браузер не поддерживает HTML тег SVG.

SVG код:

<svg>
   <defs>
     <filter x="0" y="0">
       <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
       <feColorMatrix result="matrixOut" in="offOut" type="matrix"
       values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
       <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
     </filter>
   </defs>
   <rect stroke="green" stroke-width="3" fill="yellow" filter="url(#f4)" />
</svg> 

Объяснение:

  • Фильтр <feColorMatrix> используется для трансформации цветов сдвинутого изображения в сторону черного цвета. Три значения ‘0.2’ в матрице умножаются на значения красного, зеленого и синего каналов. Уменьшение их значений сдвигает цвет в сторону черного (значение черного цвета = 0)

Оформление содержимого в SVG с помощью CSS

Подробная статья об оформлении содержимого в элементе SVG <use> и преодолении связанных с этим проблем.

Графика в формате SVG особо часто применяется для создания иконок и одной из самых распространенных техник для этого являются SVG-спрайты с использованием SVG use для инстанцирования иконок в нужном месте документа.

Инстанцирование иконок или любого другого содержимого SVG в элементе <use> вызывает сложности при оформлении отдельных экземпляров. Цель этой статьи — дать вам обзор некоторых возможных способов обойти ограничения оформления, связанные с использованием <use>.

Но перед тем как начать, давайте быстро рассмотрим основную структуру и группирование элементов в SVG, постепенно перейдя к <use>, DOM, а затем вернемся обратно к CSS. Мы разберем, почему оформление <use> может вызвать сложности и как их преодолеть.

Краткий обзор структуры SVG, группирования и ссылок на элементы в SVG

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

4 основных группирующих и связывающих элемента SVG это <g>, <defs>, <use> and <symbol>.

Элемент <g> (сокращение от “group”) используется для логической группировки наборов связанных графических элементов. В терминах графических редакторов ( типа Adobe Illustrator) элемент <g> по функционалу похож на функцию “Сгруппировать объекты”. Вы также можете думать о группе как о слое в графическом редакторе.

Группирование элементов полезно в тех случаях, когда вы хотите применить стиль ко всем элементам группы, а также, когда вы хотите анимировать все элементы группы, сохранив соотношение между ними.

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

Элемент <symbol> комбинирует возможности <defs> и <g> в том, что используется для группирования элементов с заданием шаблона, на который можно ссылаться в других участках документа. В отличие от <defs>, <symbol> не используется для задания паттернов; как правило он используется для создания символов типа иконок, которые затем применяются во всем документе.

У элемента <symbol> есть еще одно важное преимущество: он принимает атрибут viewBox, который позволяет масштабирование внутри любой области видимости.

Элемент <use> позволяет вам использовать в любом месте документа ранее определенный элемент. Он позволяет многократно использовать элементы, дает функциональность подобную копированию-вставке в графическом редакторе. С ним можно использоваться как отдельный элемент, так и группа, заданная в <g>, <defs> или <symbol>.

Чтобы использовать элемент вам надо передать ссылку на этот элемент, идентификатор — это атрибут xlink:href и спозиционировать его, задав атрибуты x и y. Вы можете применить стили к элементу <use> и они будут каскадироваться на содержимое этого элемента.

Но что является содержимым <use>? Куда он клонируется? И как каскад CSS работает с ним?

Перед тем как ответить на эти вопросы и с учетом того, что мы только по-быстрому разобрали структуру и группирование SVG, стоит упомянуть пару статей,которые позволят вам узнать больше об этих элементах, а также об атрибуте viewBox в элементе <symbol>:

  • Структурирование, группировка и ссылки в SVG — Элементы g, use, defs и symbol
  • Разбираемся в системе координат SVG (Часть 1): Viewport, viewBox и PreserveAspectRatio

SVG

<use> и теневой DOM

Когда вы ссылаетесь на элемент с помощью <use>, ваш код выглядит примерно так:

<symbol viewBox="0 0 30 30">
	<!-- icon content / shapes here -->
</symbol>
<use xlink:href="#my-icon" x="100" y="300" />

На экране отображается иконка, содержимое которой определено внутри <symbol>, но на самом деле это содержимое элемента <use>, которое является клоном <symbol>.

Но элемент <use> это всего лишь один самозакрывающийся элемент — в нем нет контента между открывающим и закрывающим тегами, так куда же клонируется содержимое <symbol>?

Ответ — в теневой DOM (почему-то он всегда у меня ассоциируется с Бэтменом, не знаю почему).

Что такое теневой DOM?

Теневой DOM идентичен обычному DOM, за исключением того, что вместо того, чтобы быть частью дерева основного документа, узлы теневого DOM относятся к фрагменту документа, который является параллельным основному, но недоступным для его скриптов и стилей. Это дает авторам возможность создавать модульные компоненты, инкапсулируя скрипты и стили. Если вы когда-либо использовали элемент video или диапазонный ввод в HTML5 и не поняли, откуда появлялись элементы управления видеоплеером или слайдер, то ответ тот же — теневой DOM.

В случае с элементом SVG <use>, содержимое, на которое он ссылается, клонируется в фрагмент документа, “хостящийся” в <use>. В данном случае <use> это теневой хост.

Итак, содержимое <use> (клон или копия элемента, на который он ссылается) присутствует внутри теневого фрагмента документа.

Другими словами, содержимое находится там, но оно невидимое. Такое же, как и содержимое обычного DOM, но не доступное высокоуровневым средствам, таким как селекторы CSS и JavaScript, скопированное в фрагмент документа, привязанный к <use>.

Теперь, если вы дизайнер, вы можете подумать: “ОК, я понял, но есть ли способ проверить этот субдокумент и увидеть его содержимое”. Ответ — да, вы можете просматривать содержимое теневого DOM, используя инструменты разработки в Chrome (в Firefox на данный момент эта функция не доступна). Но для начала вам надо активировать инспектора теневого DOM во вкладке General на панели настроек. Это подробно описано здесь.

После того, как вы активировали инспекцию теневого DOM в инструментах разработчика, вы можете видеть клонированные элементы на панели элементов, также как и элементы обычного DOM. На следующем изображении показан пример элемента <use>, ссылающегося на содержимое элемента <symbol>. Обратите внимание, что “#shadow-root” и его содержимое являются клоном содержимого <symbol>.

Используя инструменты разработчика Chrome, вы можете инспектировать содержимое элемента use внутри теневого DOM (“#shadow-root”, строка выделена серым цветом). На этом скриншоте инспектируется логотип Codrops из примера, который мы будем рассматривать в следующем разделе.

Глядя на инспектируемый код, вы можете увидеть, что теневой DOM очень похож на обычный, за исключением того, как он обрабатывается CSS и JavaScript основного документа. Существуют также иные различия между ними, которые мы не будем рассматривать в этой статье по причине их объема, поэтому если вы хотите узнать больше, я рекомендую вам следующие статьи:

  • Введение в теневой DOM
  • Что такое теневой DOM?
  • Теневой DOM 101 (перевод на Frontender. info)
  • Введение в теневой DOM (Видео)

С учетом моего ограниченного опыта взаимодействия с теневым DOM, я рассматриваю его как обычный DOM, который нужно по другому обрабатывать в части доступа CSS и JavaScript к его элементам. Это то, что важно для нас при работе с SVG: как воздействовать на содержимое <use> внутри теневого DOM, ведь нам важно иметь возможность оформлять его. Весь смысл использования <use> это возможность создавать различные копии элемента и в большинстве случаев нам надо иметь возможность стилизовать каждую копию по-разному. Например, это может быть лого в двух цветовых темах или многоцветные иконки для разных цветовых тем. Так что для нас важно иметь возможность сделать это с помощью CSS.

Как было сказано, содержимое теневого DOM недоступно для CSS в отличие от обычного DOM. Так как нам стилизовать его? Мы не можем использовать путь к потомкам типа такого:

use path#line {
    stroke: #009966;
}

Потому как у нас нет доступа к теневому DOM с помощью обычных CSS селекторов.

Существует пара специальных селекторов, проникающих в теневой DOM и применяющих стили к узлам внутри него, но они не только плохо поддерживаются, но и их возможности ограничены в сравнении с длинным списком селекторов CSS для обычного DOM.

Кроме того, нам нужен простой способ оформить содержимое SVG <use> без погружения в специфику теневого DOM, используя простой CSS и простой SVG.

Для того, чтобы добиться этого и получить больше контроля при оформлении содержимого <use>, нам нужно взглянуть на это под другим углом, использовав возможности каскадирования и наследования в CSS.

Каскадирование стилей

Итак, CSS к SVG подключается тремя различными способами — внешними CSS стилями, внутренними стилями (внутри элемента <style>) и строчными стилями (в атрибуте style), вся разница в каскадировании.

В дополнение к свойствам CSS, элементы SVG можно оформлять используя презентационные атрибуты. Презентационные атрибуты это сокращения для задания CSS-свойств элементу. Думайте о них как о специальных стилевых свойствах. Их природа позволяет использовать их в стилевом каскаде, но в несколько непривычном виде.

В следующем фрагменте кода мы получаем простой розовый круг с желтой обводкой. stroke, stroke-width и fill это презентационные атрибуты.

<svg viewBox="0 0 100 100">
    <circle fill="deepPink" stroke="yellow" stroke-width="5" cx="50" cy="50" r="10"></circle>
</svg>

В SVG подмножество CSS-свойств может быть задано SVG-атрибутами и наоборот. Это значит, что не все CSS свойства могут быть заданы элементу SVG как презентационные атрибуты и не все презентационные атрибуты, доступные в SVG, могут быть определены в CSS.

Спецификация SVG перечисляет атрибуты SVG, которые могут задаваться как свойства CSS. Некоторые из этих атрибутов есть среди обычных правил CSS, например, opacity и transform, а некоторые применяются только к SVG — fill, stroke и stroke-width.

В SVG2 этот список также включает x, y, width, height, cx, cy и несколько иных презентационных атрибутов, которые нельзя задать по спецификации SVG 1.1. Новый список можно найти в спецификации SVG2.

Возможно, вы, как и я ожидаете, что презентационные атрибуты имеют самую высокую специфичность среди всех стилевых правил. Ведь обычно внешние стили переписываются внутренними декларациями, а те в свою очередь переписываются строчными стилями атрибутов — они имеют максимальную специфичность, а, соответственно, и приоритет перед остальными стилями. И хотя это ожидание имеет смысл, действительный механизм работы отличен.

На самом деле, презентационные атрибуты рассматриваются как низкоуровневые “авторские таблицы стилей” и они переписываются остальными стилевыми декларациями: внешними, внутренними и инлайновыми стилями. Их единственная сила это приоритет перед унаследованными стилями. И все.

Теперь, когда мы выяснили это, вернемся к нашему элементу <use> и его содержимому.

Мы знаем, что мы не можем задать стили внутри <use>, используя CSS селекторы.

Но мы также знаем, что как и в случае с элементом <g>, стили примененные к <use> будут унаследованы всеми его потомками (которые находятся в теневом DOM).

Итак, сначала попытаемся изменить цвет заливки (fill) элемента внутри <use>, применив селектор к самому элементу <use> с расчетом, что каскад и наследование сделают свое дело.

Однако, это вызывает пару вопросов:

  1. Цвет заливки будет унаследован всеми потомками элемента <use>, даже теми, к которым вы не хотите применять стили (но если внутри <use> у вас всего один элемент, то этой проблемы не будет).
  2. Если вы экспортировали SVG из графического редактора или по каким-либо иным причинам не можете изменять код SVG, тогда вы в конечном итоге будете работать с SVG, к которому уже применены презентационные атрибуты (если вы явно не отмените это при экспорте в формат SVG) и значения этих атрибутов будут иметь приоритет над унаследованными от <use>.

И даже если вы можете редактировать код SVG и можете избавиться от них, я настоятельно рекомендую этого не делать по следующим причинам:

  1. Удаление атрибутов ради последующей установки определенных свойств сбросит значения этих свойств на дефолтные, а это, как правило, черная заливка и обводка (применительно к цветам).
  2. Сбрасывая значения, вы вынуждаете себя задавать стили для всего набора свойств.
  3. Презентационные атрибуты, которые изначально заданы, являются отличным запасным вариантом на случай возникновения проблем с внешними стилями. Если CSS не загрузится, у ваших иконок будет по-прежнему привлекательный вид.

Итак, у нас есть эти атрибуты, но при этом мы хотим оформить различные экземпляры иконок по разному.

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

Давайте начнем с простых примеров и постепенно перейдем к сложным.

Переписывание значений презентационных атрибутов с помощью CSS

Презентационные атрибуты переписываются любой декларацией стилей. Мы можем это использовать, для того, чтобы презентационный атрибут получил значение, унаследованное от стилей <use>.

Это просто благодаря ключевому слову CSS inherits. Взгляните на следующий пример — иконка мороженого, нарисованная одним контуром, цвет которого мы хотим изменять в разных экземплярах. Иконка создана Эрин Агноли из Noun Project.

<svg>
  <symbol>
    <path fill="#000" d="M81,40.933c0-4.25-3-7.811-6.996-8.673c-0.922-5.312-3.588-10.178-7.623-13.844  c-2.459-2.239-5.326-3.913-8.408-4.981c-0.797-3.676-4.066-6.437-7.979-6.437c-3.908,0-7.184,2.764-7.979,6.442  c-3.078,1.065-5.939,2.741-8.396,4.977c-4.035,3.666-6.701,8.531-7.623,13.844C22.002,33.123,19,36.682,19,40.933  c0,2.617,1.145,4.965,2.957,6.589c0.047,0.195,0. 119,0.389,0.225,0.568l26.004,43.873c0.383,0.646,1.072,1.04,1.824,1.04  c0.748,0,1.439-0.395,1.824-1.04L77.82,48.089c0.105-0.179,0.178-0.373,0.225-0.568C79.855,45.897,81,43.549,81,40.933z   M49.994,11.235c2.164,0,3.928,1.762,3.928,3.93c0,2.165-1.764,3.929-3.928,3.929s-3.928-1.764-3.928-3.929  C46.066,12.997,47.83,11.235,49.994,11.235z M27.842,36.301c0.014,0,0.027,0,0.031,0c1.086,0,1.998-0.817,2.115-1.907  c0.762-7.592,5.641-13.791,12.303-16.535c1.119,3.184,4.146,5.475,7.703,5.475c3.561,0,6.588-2.293,7.707-5.48  c6.664,2.742,11.547,8.944,12.312,16.54c0.115,1.092,1.037,1.929,2.143,1.907c2.541,0.013,4.604,2.087,4.604,4.631  c0,1.684-0.914,3.148-2.266,3.958h35.508c-1.354-0.809-2.268-2.273-2.268-3.958C23.24,38.389,25.303,36.316,27.842,36.301z   M50.01,86.723L27.73,49.13h54.541L50.01,86.723z"/>
  </symbol>
</svg>

Содержимое нашей иконки с мороженым (path) определено внутри элемента <symbol> , а, значит, оно по умолчанию не будет выводится на холст.

Мы выводим множественные экземпляры иконки с помощью <use>.

<svg viewBox="0 0 100 125"> 
    <use xlink:href="#ic" x="0" y="0" />
</svg>
<svg viewBox="0 0 100 125"> 
    <use xlink:href="#ic" x="0" y="0" />
</svg>

Ширину и высоту иконок мы задаем с помощью CSS. Я использую те же размеры, что и у viewBox, но они не должны быть идентичными. Однако, чтобы избежать избытка пустого пространства внутри SVG, убедитесь, что вы сохраняете соотношение между сторонами.

.icon {
    width: 100px;
    height: 125px;
}

С этим кодом мы получили следующий результат:

Заметьте, что благодаря добавленным черным рамкам вокруг наших SVG вы видите границы каждого из них, в том числе и первого, в котором содержимое не рендерится. Запомните: SVG-документ, в котором вы определили symbol будет выводится на страницу, но без содержимого. Чтобы предотвратить это, используйте свойство display: none на первом SVG. Если вы не спрячете SVG с определениями иконок, он будет выводится на экран даже если вы не зададите для него размеры — он займет дефолтные 300 на 150 пикселей (это значение по умолчанию для незамещаемых элементов в CSS) и вы получите ненужный вам пустой блок на экране.

Теперь попробуем изменить цвет заливки для каждого экземпляра иконки:

use.ic-1 {
    fill: skyblue;
}
use.ic-2 {
    fill: #FDC646;
}

Цвет заливки иконок по-прежнему не меняется, так как унаследованный цвет переписывается атрибутом fill="#000" в элементе path. Чтобы это не произошло, нам надо вынудить path унаследовать цвет:

svg path {
    fill: inherit;
}

Вуаля! Цвета, заданные элементам <use> теперь применяются к path каждого из них. Проверьте демо и поэкспериментируйте со значениями, создавая экземпляры и задавая им разные цвета:

See the Pen mErELQ by prgssr (@prgssr) on CodePen.

Теперь эта техника работает, после того как мы вынудили содержимое <use> унаследовать стили. Но во многих случаях это не совсем то, что вам нужно. Есть и другие способы оформления, к некоторым из них мы сейчас перейдем.

Оформление содержимого

<use> с помощью свойства CSS all

Некоторое время назад, при работе над иконкой, активируемой с помощью <use>, мне надо было, чтобы один из элементов внутри него унаследовал все стили <use>, такие как fill, stroke, stroke-width, opacity и даже transform. Таким образом, мне надо было контролировать все эти атрибуты через CSS, сохраняя при этом в разметке все презентационные атрибуты в качестве запасного варианта.

Если вы столкнетесь с похожей задачей, вы, вероятно, решите, что она займет слишком много времени, если все делать в CSS:

path#myPath {
    fill: inherit;
    stroke: inherit;
    stroke-width: inherit;
    transform: inherit;
    /* . .. */
}

Рассмотрев этот сниппет, вы заметите паттерн, а, значит, имело бы смысл объединить все указанные свойства в одно и задать ему значение inherit.

К счастью, нам поможет свойство CSS all. В моем справочнике по CSS упоминается использование свойства all для оформления SVG, но стоит освежить наши знания.

Используя свойство all мы можем сделать так:

path#myPath {
    all: inherit;
}

Это прекрасно работает во всех браузерах, поддерживающих all, однако надо учитывать следующий важный момент: эта декларация задает элементу наследование буквально всех свойств его родителя, в том числе и тех, которые вы не хотите задавать элементу. Поэтому, если вы не хотите, чтобы стилизовались все свойства CSS, вам это не подойдет — это крайняя мера и она частично подходит только тогда, когда у вас есть нестилизованный элемент и полный контроль над его свойствами в CSS. Если вы используете эту декларацию и не определяете значения для всех свойств CSS, они будут каскадироваться пока не найдут значение для наследования, в большинстве случаев это дефолтные стили браузера.

Заметьте, что это относится только к атрибутам, которые можно устанавливать с помощью CSS, а не к атрибутам, задаваемым только в SVG. Если атрибут может быть задан с помощью CSS — он унаследует стили, иначе нет.

Возможность активировать наследование презентационными атрибутами всех стилей <use>, но что если у вас иконка, состоящая из нескольких элементов и вы не хотите, чтобы все они унаследовали один и тот же цвет заливки? Что если вы хотите применять множество различных цветов заливки для разных потомков? Задание одного стиля в <use> уже не подходит. Нам нужно что-то другое, чтобы каскадировать нужные цвета к нужным элементам.

Использование переменной CSS

currentColor для оформления содержимого <use>

Использование переменной CSS currentColor в сочетании с техникой, описанной выше, позволяет определить два цвета для элемента, а не один. Год назад Фабрис Вайнберг написал об этом статью в своем блоге на Codepen.

Идея состоит в том, чтобы одновременно применять к <use> свойства fill и color, а затем каскадировать эти свойства к содержимому <use>, используя возможности переменной currentColor. Посмотрим на пример кода, чтобы понять, как это работает.

Предположим, мы хотим оформить это минималистичное лого Codrops, используя 2 цвета — один для передней капли, а второй для задней.

Во-первых, начнем с кода для этого изображения: у нас есть symbol, содержащий описание иконки и три экземпляра <use>, создающие три экземпляра лого.

<svg>
<symbol viewBox="0 0 23 30">
    <path fill="#aaa" d="M22.63,18.261c-0.398-3.044-2.608-6.61-4.072-9.359c-1.74-3.271-3.492-5.994-5.089-8.62l0,0   c-1.599,2.623-3.75,6.117-5.487,9.385c0.391,0.718,0.495,1.011,0.889,1.816c0.143,0.294,0.535,1.111,0.696,1.43   c0.062-0.114,0.582-1.052,0.643-1.162c0.278-0.506,0.54-0.981,0. 791-1.451c0.823-1.547,1.649-2.971,2.469-4.33   c0.817,1.359,1.646,2.783,2.468,4.33c0.249,0.47,0.513,0.946,0.791,1.453c1.203,2.187,2.698,4.906,2.96,6.895   c0.292,2.237-0.259,4.312-1.556,5.839c-1.171,1.376-2.824,2.179-4.663,2.263c-1.841-0.084-3.493-0.887-4.665-2.263   c-0.16-0.192-0.311-0.391-0.448-0.599c-0.543,0.221-1.127,0.346-1.735,0.365c-0.56-0.019-1.095-0.127-1.599-0.313   c1.448,3.406,4.667,5.66,8.447,5.78C19.086,29.537,23.469,24.645,22.63,18.261z"/>
    <path fill="#ddd" d="M6.177,11.659c0.212,0.367,0.424,0.747,0.635,1.136c0.164,0.303,0.333,0.606,0.512,0.927   c0.683,1.225,1.618,2.898,1.755,3.937c0.144,1.073-0.111,2.056-0.716,2.769c-0.543,0.641-1.315,1.014-2.186,1.067   c-0.87-0.054-1.643-0.43-2.186-1.067c-0.604-0.713-0.858-1.695-0.715-2.771c0.137-1.036,1.072-2.712,1.755-3.936   c0.18-0.32,0.349-0.623,0.513-0.927C5.752,12.404,5.964,12.026,6.177,11.659 M6.177,5.966L6.177,5.966   c-1.02,1.649-2.138,3.363-3.247,5.419c-0.932,1.728-2.344,3.967-2.598,5.88c-0.535,4.014,2.261,7.09,5. 846,7.203   c3.583-0.113,6.379-3.189,5.845-7.203c-0.255-1.912-1.666-4.152-2.598-5.88C8.314,9.329,7.196,7.617,6.177,5.966L6.177,5.966z"/>
</symbol>
</svg>
<svg>
  <use xlink:href="#codrops"/>
</svg>
<svg>
  <use xlink:href="#codrops"/>
</svg>
<svg>
  <use xlink:href="#codrops"/>
</svg>

Если мы зададим цвет заливки (fill) в элементе <use> для каждого экземпляра, этот цвет будет унаследован обоими каплями, что не является нашей целью.

Поэтому вместо определения цвета заливки и каскадирования его обычным способом, мы будем использовать переменную currentColor , чтобы меньшая капля на переднем плане была другого цвета и это значение мы зададим с помощью свойства color.

Для начала нам надо вставить currentColor туда, где мы хотим применить этот цвет — это будет место в разметке, где определяется иконка, то есть внутри <symbol>. Теперь этот фрагмент выглядит так:

<svg>
	<symbol viewBox="0 0 23 30">
		<path fill="#aaa" d="..."/>
		<path fill="currentColor" d="..."/>
	</symbol>
</svg>

Затем нам надо удалить презентационный атрибут fill из второй капли и позволить ей унаследовать цвет заливки (fill) от элемента <use> с помощью inherit.

Если бы мы использовали ключевое слово inherit, чтобы вынудить презентационные атрибуты унаследовать значения от <use>, обе части унаследовали бы одинаковое значение, а currentColor не имела бы никакого эффекта. Поэтому в этой технике нам надо удалить тот атрибут, который мы хотим задать через CSS, а оставить только тот, в котором мы будем использовать currentColor.

<svg>
	<symbol viewBox="0 0 23 30">
		<path d="..."/>
		<path fill="currentColor" d="..."/>
	</symbol>
</svg>

Теперь, используя свойства fill и color в <use> мы добавим стили к капле из логотипа:

. codrops-1 {
  fill: #4BC0A5;
  color: #A4DFD1;
}
.codrops-2 {
  fill: #0099CC;
  color: #7FCBE5;
}
.codrops-3 {
  fill: #5F5EC0;
  color: #AEAFDD;
}

Каждый элемент <use> получает собственное значение fill и color. В каждом из них цвет fill каскадируется и заполняет первый контур, не имеющий атрибута fill, а цвет свойства color используется для задания атрибута fill во втором контуре.

Так что произошло следующее: значение текущего цвета просочилось в стили содержимого элемента <use> за счет использования переменной currentColor. Изящно, не правда, ли?

Вот демо с использованным кодом:

See the Pen aZmZXV by prgssr (@prgssr) on CodePen.

Этот двухцветная техника отлично подходит для двухцветных лого. В своей статье Фабрис создал три различных версии лого Sass, изменяя цвет текста относительно фона.

Ключевое слово currentColor это единственная доступная переменная CSS на данный момент. Однако, если бы у нас было бы больше переменных, могли бы мы их использовать для заполнения еще большего количества значений в содержимом <use>? Да, могли бы. Амелия Беллами-Ройдс год назад представила концепцию этого в своем блоге на Codepen. Посмотрим, как это работает.

Будущее: оформление содержимого

<use> c помощью переменных CSS

Используя кастомные свойства CSS (переменные CSS) вы можете оформить содержимое <use>, не вынуждая браузер переписывать значения презентационных атрибутов.

Как сказано на MDN, CSS переменные это сущности, заданные авторами или пользователями веб-страниц для хранения и использования определенных значений по всему документу. Они задаются с использованием кастомных свойств и доступны с использованием специфичной нотации var(). Они очень похожи на переменные из CSS-препроцессоров, но более гибкие и могут делать то, на что неспособны переменные препроцессоров. (Скоро в справочнике CSS появится статья о них).

Переменные CSS, как и переменные препроцессоров могут найти множество использований, но цветовая темизация это один из самых распространенных вариантов. И в этом разделе мы рассмотрим, как мы можем их применить при оформлении SVG.

Мы начнем с изображения, заданного в symbol и инстанцированного с помощью <use>, применив технику только к изображению; концепция примененная к стилю содержимого <use> может применяться к любому количеству элементов <use> на ваше усмотрение.

Мы будем использовать изображение этого прикольного робота-хипстера, созданного Freepik.

Код робота содержит все составляющие его цвета:

<svg>
    <symbol viewBox="0 0 340 536">
        <path d="..." fill="#fff" />
        <path d="..." fill="#D1312C" />
        <path d="..." fill="#1E8F90" />
        <path d="..." fill="#1E8F90" />
        <path d=". .." fill="#fff" />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#1E8F90"  />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#fff" />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#F2B42B" />
        <path d="..." fill="#fff" />
     
       <!-- rest of the shapes -->
    </symbol>
</svg>

Теперь, мы не будем использовать переменные CSS в качестве значений атрибута fill для каждого контура. Вместо этого мы будем их использовать в качестве цветов заливки используя свойство CSS fill, сохранив на месте все атрибуты fill. Эти атрибуты будут использоваться в качестве запасного варианта для браузеров, не поддерживающих переменные CSS — изображение будет выглядеть в своем изначальном виде, если переменные CSS не работают.

С добавленными переменными код будет следующим:

<svg>
    <symbol viewBox="0 0 340 536">
        <path d=". .." fill="#fff" />
        <path d="..." fill="#D1312C" />
        <path d="..." fill="#1E8F90" />
        <path d="..." fill="#1E8F90" />
        <path d="..." fill="#fff" />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#1E8F90" />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#fff" />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#F2B42B" />
        <path d="..." fill="#fff" />
       
        <!-- rest of the shapes -->
    </symbol>
</svg>

Так как инлайновые теги style переписывают презентационные атрибуты, браузеры с поддержкой CSS-переменных будут использовать эти переменные для задания цвета заливки (fill). А браузеры, не поддерживающие их, будут использовать атрибут fill.

Затем нам надо задать значения для переменных в CSS. Но сначала инстанцируем изображение с помощью <use>:

<svg>
    <<use> xlink:href="#robot" />
</svg>

После этого зададим значения переменных для use, чтобы они могли каскадироваться к его содержимому. Выбранные вами цвета создадут цветовую схему рисунка. Так как в нашем роботе используется три основных цвета, мы назовем их primary, secondary и tertiary.

#robot-1 {
  --primary-color: #0099CC;
  --secondary-color: #FFDF34;
  --tertiary-color: #333;
}

Вы по-прежнему можете использовать свойства fill и color вместе с этими переменными, но вы можете вполне обойтись и без этого. Итак, с цветами заданными в наших переменных, робот выглядит так:

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

Как было упомянуто, браузеры, не поддерживающие CSS-переменные используют заданные презентационные атрибуты в качестве запасного варианта, а браузеры с поддержкой переменных CSS используют их для заполнения свойства fill и переписывания атрибутов. Но что происходит, если браузер поддерживает переменные CSS, но вы забыли задать эти переменные в стилях или задали некорректное значение?

Для нашего робота-хипстера мы задали три переменных и только несколько его фрагментов не зависят от них — ведь он изначально разрабатывался для возможной темизации. Поэтому если вы запустите этот код в браузере с поддержкой переменных CSS и удалите все декларации с объявлением этих переменных, вы получите следующий результат:

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

Обойти это можно, задав другой цвет в качестве запасного варианта для поддерживающих браузеров. Синтаксис переменных CSS позволяет сделать так: вместо передачи функции var() имени переменной в качестве аргумента, вы передаете два аргумента, разделенных запятой — имя переменной и запасной вариант, в данном случае это будет значение для презентационного атрибута.

Итак, теперь код нашего робота выглядит так:

<svg>
    <symbol viewBox="0 0 340 536">
        <path d="..." fill="#fff" />
        <path d="..." fill="#D1312C" />
        <path d="..." fill="#1E8F90" />
        <path d="..." fill="#1E8F90" />
        <path d="..." fill="#fff" />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#1E8F90" />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#fff" />
        <path d="..." fill="#6A4933" />
        <path d="..." fill="#F2B42B" />
        <path d="..." fill="#fff" />
         <!-- rest of the shapes -->
    </symbol>
</svg>

И это все. Если у какой-либо переменной не будет задано значение, у браузера всегда будет в запасе цвет, заданный в качестве запасного варианта. Замечательно.

Используя эту технику, вы можете выводить этого робота где угодно на странице с помощью <use>, задавая для каждого экземпляра разные цвета и получая различные цветовые темы в итоге.

Вы можете поэкспериментировать с демо, создать сколько угодно копий робота и раскрасить его любыми цветами — не забудьте только, что для этого обязательно надо использовать браузер с поддержкой переменных CSS:

See the Pen vKXXYP by prgssr (@prgssr) on CodePen.

Если вы просматриваете это демо в браузере с поддержкой переменных CSS, то среди прочих вы увидите голубую с желтым версию робота, как мы и задавали в CSS-переменных. Иначе вы увидите трех одинаковых роботов с цветом запасного варианта.

Подводя итоги

Это была большая статья.

Используя возможности каскада CSS, оформление содержимого <use>, хранимого в теневом DOM, становится менее сложным. А с переменными CSS (currentColor или с пользовательскими свойствами) мы можем проникнуть в теневой DOM и кастомизировать нашу графику, как хотим, создавая при этом запасной вариант на случай проблем.

Лично мне очень симпатично сочетание переменных CSS и SVG. Мне нравятся их совместный функционал, особенно в части создания механизма запасного варианта.

Мы также можем получить другие способы оформления содержимого<use> в будущем, так как продолжаются дискуссии об использовании переменных CSS в качестве параметров SVG — поэтому данная статья не покрывает все, что можно узнать по этой теме.

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

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

Элемент используется для хранения графических объектов, которые будут использоваться позднее. Объекты, созданные внутри элемента , не визуализируются напрямую. Чтобы отобразить их, вы должны сослаться на них (например, с помощью элемента ).

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

 html,body,svg { height:100% } 
 
  
  <определения>
    <круг cx="0" cy="0" r="5" />
    
      
      
    
  
 
  
  
 

Атрибуты

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

Основные атрибуты
В частности: id lang
Атрибуты стиля
класс , стиль
Атрибуты событий
Глобальные атрибуты событий, атрибуты событий элементов документа, графические атрибуты событий
Атрибуты презентации
В частности: Clip-Path , Правила клипа , Color , Color-Interpolation , Цветовой Ренденринг , Cursor , Display , Fill , Fill-opcytiny , заполняем , Фильтр , Mask , Opacity , Pointer-Events , Рендендинг формы , Husm , Husce-Dasharray , -Dashoffset , Stroke-LineCap , холк. -linejoin , stroke-miterlimit , мазок-непрозрачность , мазок-ширина , преобразование , вектор-эффект , видимость

Замечания по использованию

Категории Контейнерный элемент, Структурный элемент
Разрешенный контент Любое количество следующих элементов в любом порядке:
Анимационные элементы
Описательные элементы
Структурные элементы

4 Градиентные элементы
, , , , , , , , , , , , , , , , , . font-face> , , , , , ,

Добавить комментарий

Ваш адрес email не будет опубликован.