Применение эффектов SVG к содержимому HTML

Современные браузеры поддерживают использование SVG в стилях CSS для применения графических эффектов к содержимому HTML.

Вы можете указать SVG в стилях как в том же документе, так и во внешней таблице стилей. Можно использовать 3 свойства: mask, clip-path и filter.

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

Использование встроенного SVG

Чтобы применить эффект SVG с помощью стилей CSS, сначала необходимо создать стиль CSS, ссылающийся на нужный SVG.

p {
  mask: url("#my-mask");
}

В приведённом выше примере все абзацы маскируются с помощью элемента SVG <mask> с идентификатором my-mask.

Пример: маскирование

Например, можно создать градиентную маску для содержимого HTML с помощью кода SVG и CSS, подобного приведённому ниже, внутри HTML-документа:

<svg height="0">
  <mask id="mask-1">
    <linearGradient id="gradient-1" y2="1">
      <stop stop-color="white" offset="0" />
      <stop stop-opacity="0" offset="1" />
    </linearGradient>
    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white" />
    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)" />
  </mask>
</svg>

.target {
  mask: url("#mask-1");
}
p {
  width: 300px;
  border: 1px solid black;
  display: inline-block;
}
p.target {
  background: lime;
}

Обратите внимание: в CSS маска задаётся с помощью URL, указывающего на идентификатор #mask-1 — идентификатор маски SVG, заданной ниже. Всё остальное описывает параметры самой градиентной маски.

Чтобы применить эффект SVG к HTML, назначьте элементу класс target, определённый выше, например:

<p class="target">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <em class="target"
    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.</em
  >
  Ut enim ad minim veniam.
</p>

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

Пример: обрезка

Этот пример демонстрирует обрезку содержимого HTML с помощью SVG. Обратите внимание, что обрезаются даже области ссылок, по которым можно щёлкнуть.

<p class="target">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <em class="target"
    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.</em
  >
  Ut enim ad minim veniam.
</p>

<button>Toggle radius</button>

<svg height="0">
  <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
    <circle cx="0.25" cy="0.25" r="0.25" id="circle" />
    <rect x="0.5" y="0.2" width="0.5" height="0.8" />
  </clipPath>
</svg>

.target {
  clip-path: url("#clipping-path-1");
}
p {
  width: 300px;
  border: 1px solid black;
  display: inline-block;
}
p.target {
  background: lime;
}

Здесь создаётся область обрезки из круга и прямоугольника, ей назначается идентификатор #clipping-path-1, а затем она указывается в CSS. Контур обрезки можно назначить любому элементу с классом target.

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

const circle = document.getElementById("circle");

function toggleRadius() {
  circle.r.baseVal.value = 0.4 - circle.r.baseVal.value;
}

document.querySelector("button").addEventListener("click", toggleRadius);

Пример: фильтрация

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

<p class="target">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<pre class="target">lorem</pre>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <em class="target"
    >elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.</em
  >
  Ut enim ad minim veniam.
</p>

Таким способом можно применить любой фильтр SVG. Например, для создания эффекта размытия можно использовать:

<svg height="0">
  <filter id="f1">
    <feGaussianBlur stdDeviation="3" />
  </filter>
</svg>

Можно также применить цветовую матрицу:

<svg height="0">
  <filter id="f2">
    <feColorMatrix
      values="0.3333 0.3333 0.3333 0 0
              0.3333 0.3333 0.3333 0 0
              0.3333 0.3333 0.3333 0 0
              0      0      0      1 0" />
  </filter>
</svg>

И ещё несколько фильтров:

<svg height="0">
  <filter id="f3">
    <feConvolveMatrix
      filterRes="100 100"
      color-interpolation-filters="sRGB"
      order="3"
      kernelMatrix="0 -1 0
                   -1 4 -1
                    0 -1 0"
      preserveAlpha="true" />
  </filter>
  <filter id="f4">
    <feSpecularLighting
      surfaceScale="5"
      specularConstant="1"
      specularExponent="10"
      lighting-color="white">
      <fePointLight x="-5000" y="-10000" z="20000" />
    </feSpecularLighting>
  </filter>
  <filter id="f5">
    <feColorMatrix
      values="1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              0 1 0 0 0"
      color-interpolation-filters="sRGB" />
  </filter>
</svg>

Пять фильтров применяются с помощью следующего CSS:

p.target {
  filter: url("#f3");
}
p.target:hover {
  filter: url("#f5");
}
em.target {
  filter: url("#f1");
}
em.target:hover {
  filter: url("#f4");
}
pre.target {
  filter: url("#f2");
}
pre.target:hover {
  filter: url("#f3");
}

Пример: размытие текста

Для размытия текста существует функция фильтра CSS blur(). Такого же эффекта можно добиться с помощью фильтров SVG.

<p class="blur">Time to clean my glasses</p>
<svg height="0">
  <defs>
    <filter id="wherearemyglasses" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
  </defs>
</svg>

Можно применить SVG и фильтр CSS в одном классе:

.blur {
  filter: url("#wherearemyglasses");
}

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

Пример: текстовые эффекты

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

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

<svg height="60" width="200">
  <text x="0" y="15" fill="blue" transform="rotate(30 20,50)">
    Example text
  </text>
</svg>

Использование внешних ссылок

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

Например, если CSS находится в файле с именем default.css, он может выглядеть так:

.target {
  clip-path: url("resources.svg#c1");
}

Затем SVG импортируется из файла с именем resources.svg с использованием контура обрезки с идентификатором c1.

См. также

SVG
clip-path свойство
mask свойство
Фигуры при обрезке и маскировании — и как их использовать

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/Applying_SVG_effects_to_HTML_content