Анимация Обрезанные элементов в SVG

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

Эта статья объясняет разницу между SVG clipPathи CSS clip-path, В том числе примеров, чтобы направлять и информировать вас через этот путь.Наконец, я поделюсь несколько демо личной и в дикой природе, чтобы помочь вам лучше понять clipPathанимация и вдохновлять свои видения .

Clipping Факты Link

Когда только часть объекта видна через ограничивающую область, мы называем это обтравочной маски.Другими словами, мы получаем маску отсечения, когда часть выбранной поверхности “вырезать”, каких-либо объектов, которые сидят в ограниченной области видимого зрителю.Любые части, которые лежат за пределами региона являются невидимыми .

Подумайте о __41 отсечения путь |CSS или SVG —в качестве пользовательского окна просмотра, как в иллюминатор подводной лодки.Отсечения пути также можно считать особым типом маски в соответствии с W3C²“S” Отсечение, Маскировка и композитинг “спецификация:

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

Если вам интересно, как события происходить в SVG с clipPath, Следующая диаграмма показывает, каким образом SVG clipPathструктурирована:

Белая часть —клип область Путь —является интерактивным для пользователя, в то время как красная часть не была.Черная линия представляет собой радиус .

Обрезанные содержание требующий взаимодействия, например, данных, управляемых событиями, работает в соответствии с “Отсечения путей, геометрия, и указатель Events³“Раздел спецификации:

По умолчанию, указатель события не должны быть направлены на вырезанных (не видно) регионах форме.Например, круг с радиусом 10, который обрезается по кругу с радиусом 5 не получит “нажмите” события за пределами меньшего радиуса .

CSS Клип Link

Разница между SVG clipPath⁴и CSS clip-path⁵это важно.Последнее определяет конкретный регион элемента для отображения.Все это делается в рамках таблицы стилей .

.target-element {
  clip-path: inset(10px 20px 30px 40px);
}

Значения в скобках ограничивающих читаются как “сверху, справа, снизу, слева.« Эти значения определяют отсечения форму соответствующего элемента .

Конечно, мы могли бы реализовать гораздо более сложные узоры отсечения, используя разнообразные формы, как наш шаблон.Например, мы могли бы обрезать, используя внешнюю SVG clipPath, На которые ссылается уникальный идентификатор (ID) или многоугольника, заданного в качестве серии точек .

“Clippy”, the in-browser tool that allows developers to visually explore CSS clipping paths — “Clippy”, инструмент в браузере, что позволяет разработчикам визуально исследовать CSS отсечения пути.( Просмотр большой version __42 | 7 )

Если вы хотите визуально направляющий Беннетт Фили сделал весьма образовательных и интерактивный инструмент, называемый Clippy⁸, Что позволяет разработчикам изучить различные формы отсечения в браузере .

<!DOCTYPE html>
<html>
  <body>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <clipPath id="#inline-svg-clipPath">
      <circle cx="150" cy="150" r="50" />
    </clipPath>
  </svg>

  <div class="clipped-element"></div>
 </body>
</html>

Ниже приведен список возможных вариаций с использованием clip-pathНедвижимость в CSS.Первый блок кода представляет собой SVG, расположенный рядный с разметкой и называют по внешней таблицы стилей.Раскомментируйте каждое изменение, чтобы посмотреть на результат такого подхода .

.clipped-element {
  width: 100px;
  height: 100px;
  background: black;

  /* Refers to the inline SVG clipPath element above */
  clip-path: url(#inline-svg-clipPath);

  /* Refers to an external SVG using the same contents of the inline SVG above. */
  /*clip-path: url(path/to/image.svg#inline-svg-clipPath);*/

  /* CSS polygon clip-path */
  /*clip-path: polygon(45% 15%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); */

  /* CSS circle clip-path */
  /* clip-path: circle(30px at 35px 35px); */

  /* CSS ellipse clip-path */
  /*clip-path: ellipse(65px 30px at 125px 40px);*/
 }

SVG маска Vs.SVG clipPathLink

См Pen SVG Mask⁹Деннис Gaebel ( @ dennisgaebel ²⁶ ¹⁶ ¹⁰) на CodePen⁴¹³⁸³¹²⁷¹⁷¹¹.

Это каким образом SVG маска работает с использованием <text>и <linearGradient>SVG элементы, наряду с оттенком анимации для подметания эффекта .

Точно так же мы не путайте SVG maskс SVG clipPathДавайте посмотрим, что в SVG maskи как это отличается от clipPath,Мне нравится думать, масок, как способ, чтобы принять видимую область уже определенный формы —как если бы вы были, чтобы покрыть объект с одеялом и определить видимую область по форме объекта нажатой в этой одеяло —в то время как путь отсечения определяет shape, Не является объектом.В последнем случае, объект будет покрыта покрывалом, с видимой области уже определены, а не видимой области наследуется из объекта.Векторная версия маска определяется в specification¹²следующим образом:

А “маска” может содержать любые графические элементы или элементы контейнера, такие как [...]

Любой графический объект, который использует / ссылки данная “маска” элемент будет окрашен на фоне через маску, таким образом, полностью или частично маскировки части графического объекта .

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

<mask></mask>

Оператор maskэлемент принимает немало атрибутов, которые принимают некоторое привыкание, такие как maskUnits,Если вам интересно, об атрибутах, обратитесь к specification¹³.

Многое, как clipPath, А maskмогут быть использованы несколько раз, до тех пор, он был определен в определениях,defs.

<defs>
  <mask id="mask">
    <rect width="800" height="300" fill="url(#gradient)"/>
  </mask>
 </defs>

Как спецификации государств, “Маска может принимать графический объект.” В этом случае, прямоугольник отвечает этому требованию.Прямоугольник маски также была заполнена с линейным градиентом .

<use xlink:href="#txt" mask="url(#mask)"/>

Окончательные шаги, чтобы ссылаться на эту маску, используя maskатрибутов и передать идентификатор maskв defsчтобы атрибут в url()Метод, который извлекает этот maskс соответствующим ID.Оператор useэлемент позволяет переносимость, которые могли бы быть знакомы тех, кто использовать SVG значок спрайтов .

<defs>
  <linearGradient gradientTransform="translate(10)">…</linearGradient>
</defs>

Есть некоторые действительно хитрые способы, чтобы оживить линейные градиенты в SVG с помощью gradientTransformатрибут.Этот атрибут принимает многие transformзначения, в том числе translate()scale()rotate()и matrix(),Если вы хотите, чтобы нырнуть глубже, спецификация списки Все принятого values¹⁴.

Оператор gradientTransformпример показывает, как значения могут быть переданы с помощью transformСинтаксис, что вы знакомы с .

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

Вращающийся глобус Link

См Анимированные SVG clipPath¹⁵Деннис Gaebel ( @ dennisgaebel ²⁶ ¹⁶ ¹⁰) на CodePen⁴¹³⁸³¹²⁷¹⁷¹¹.

Анимированные SVG clipPathкредитование движение земной шар .

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

Exposing the SVG paths when the clipping mask is removed in Illustrator — Разоблачение SVG пути, когда отсечения маска снимается в Illustrator.( Просмотр большой version ¹⁹)

Отдых в defsв SVG является форма отсечения (т.е. эллипс).Прямо под ней ссылка, которая превращает этот эллипс в многоразовой отсеченной.Вы также можете думать о нем, как символ многоразового .

Оператор defsэлемент позволяет графические объекты должны быть определены для повторного использования.Когда это возможно, определить ссылки элементов внутри этого элемента.Определение графических визуальные, такие как линейных градиентов и анимации внутри этих элементов способствует как понимание содержания SVG и accessibility²⁰.

Потому что пути отсечения, определенной в defsимеет идентификатор, его можно отнести к с useэлемент, чтобы сделать эти графические эффекты в любом месте.Отсечения путь называется использованием clip-pathатрибутов, а именно:

<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 484.4 261.7">
    <defs>
    <ellipse id="ellipseClip" cx="239.7" cy="139.2" rx="65" ry="62.5"/>
        <clipPath id="clipPathId">
      <use xlink:href="#ellipseClip" overflow="visible"/>
    </clipPath>
    </defs>

  <g id="globe">
    <use xlink:href="#ellipseClip" fill="#A4CAE1" overflow="visible"/>
      <g id="middle" clip-path="url(#clipPathId)">…</g>
    <g id="left" clip-path="url(#clipPath)">…</g>
  </g>
</svg>

В этом случае useэлемент используется несколько раз, что делает этот метод одним из лучших частей о SVG.Любые графические элементы определяются внутри defsнепосредственно не оказывали и могут быть сохр …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 16.12.2015 by coding.smashingmagazine.com