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

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

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

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

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

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


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


В приведённом выше примере все параграфы маскируются с помощью SVG (en-US) `<mask>` (en-US) с ID `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-адреса ID- `#mask-1`, которая является идентификатором маски SVG, указанной ниже. Все остальное указывает подробности о самой маске градиента.

Применение SVG-эффекта к (X) 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
  <b class="target"
 >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
 >
  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
  <b class="target"
 >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
 >
  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;
}
```


Это устанавливает область отсечения, образованную из круга и прямоугольника, присваивает ему ID `#clipping-path-1`, а затем ссылается на него в CSS. Путь клипа может быть назначен любому элементу с `target` классом.

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


```js
function toggleRadius() {
  var 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
  <b class="target"
 >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
 >
  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);
}
b.target {
  filter: url(#f1);
}
b.target:hover {
  filter: url(#f4);
}
pre.target {
  filter: url(#f2);
}
pre.target:hover {
  filter: url(#f3);
}
```

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

Чтобы размыть текст, браузеры, основанные на Webkit, имеют (префиксный) CSS-фильтр, называемый blur (см. Также CSS filter). Вы можете добиться такого же эффекта, используя фильтры 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)">
    Пример текста
  </text>
</svg>
```

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

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

 For example, if your CSS is in a file namedit can look like this:
 Например, если ваш CSS находится в файле с именем `default.css`, он может выглядеть следующим образом:


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


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

Смотрите также
--------------

* SVG (en-US)
* Эффекты SVG для HTML-контента (запись в блоге)
* Web Tech Blog »Архив блога» Ссылки на внешние документы SVG)