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

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

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

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

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

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

html

<style>
  p {
    mask: url(#my-mask);
  }
</style>

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

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

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

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>

css

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

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

Применение эффекта SVG к HTML достигается путем назначения класса target, определённого выше, элементу, например:

html

<p class="target" style="background:lime;">
  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>

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

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

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

html

<p class="target" style="background:lime;">
  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 onclick="toggleRadius()">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>

css

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

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

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

function toggleRadius() {
  const circle = document.getElementById("circle");
  circle.r.baseVal.value = 0.4 - circle.r.baseVal.value;
}

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

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

html

<p class="target" style="background: lime;">
  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-фильтр может быть применён таким образом. Например, для применения эффекта размытия вы можете использовать:

html

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

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

html

<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>

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

html

<svg height="0">
  <filter id="f3">
    <feConvolveMatrix
      filterRes="100 100"
      style="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"
      style="color-interpolation-filters:sRGB" />
  </filter>
</svg>

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

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-фильтры.

html

<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-фильтр в одном классе:

css

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

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

Пример: Эффекты текста

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

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

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, он может выглядеть так:

css

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

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

См. также

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

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