This page was translated from English by the community.Learn more and join the MDN Web Docs community.
Применение эффектов SVG к содержимому HTML
Современные браузеры поддерживаютSVG в стиляхCSS для применения графических эффектов к HTML-контенту.
Вы можете указать SVG в стилях как внутри одного документа, так и из внешней таблицы стилей. Есть 3 свойства, которые вы можете использовать:mask,clip-path, иfilter.
Примечание:Ссылки на SVG во внешних файлах должны быть в том же самом источникеsame origin , что и ссылочный документ.
Использование встроенного SVG
Чтобы применить эффект SVG с использованием стилей CSS, вам нужно сначала создать стиль CSS, который ссылается на SVG.
<style> p { mask: url(#my-mask); }</style>В приведённом выше примере все параграфы маскируются с помощьюSVG<mask> сIDmy-mask.
Пример: маскировка
Например, вы можете сделать градиентную маску для содержимого HTML, используя код SVG и CSS, похожий на следующий, внутри вашего документа HTML:
<svg height="0"> <mask> <linearGradient 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" 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 #000; display: inline-block;}Обратите внимание, что в CSS маска указана с использованием URL-адреса ID-#mask-1, которая является идентификатором маски SVG, указанной ниже. Все остальное указывает подробности о самой маске градиента.
Применение SVG-эффекта к (X) HTML выполняется путём назначенияtarget классу, определённому выше элементу, например:
<p> 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 >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b > Ut enim ad minim veniam.</p>Вышеприведённый пример будет отображаться с помощью маски, применяемой к нему.
Пример: обрезание
Этот пример демонстрирует использование SVG для клипа содержимого HTML. Обратите внимание, что даже кликаемые области для ссылок обрезаются.
<p> 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 >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b > Ut enim ad minim veniam.</p><button>Toggle radius</button><svg height="0"> <clipPath clipPathUnits="objectBoundingBox"> <circle cx="0.25" cy="0.25" r="0.25" /> <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 #000; display: inline-block;}Это устанавливает область отсечения, образованную из круга и прямоугольника, присваивает ему ID#clipping-path-1, а затем ссылается на него в CSS. Путь клипа может быть назначен любому элементу сtarget классом.
Вы можете вносить изменения в SVG в реальном времени, и они сразу же повлияют на рендеринг HTML. Например, вы можете изменить размер круга в указанном выше пути клипа:
function toggleRadius() { var circle = document.getElementById("circle"); circle.r.baseVal.value = 0.4 - circle.r.baseVal.value;}Пример: Фильтрация
Это демонстрирует применение фильтра к содержимому HTML с помощью SVG. Он устанавливает несколько фильтров, которые применяются с CSS к трём элементам как в нормальном состоянии, так и приhover мыши.
<p> 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>lorem</pre><p> Lorem ipsum dolor sit amet, consectetur adipisicing <b >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b > Ut enim ad minim veniam.</p>Любой SVG-фильтр может применяться таким образом. Например, чтобы применить эффект размытия, вы можете использовать:
<svg height="0"> <filter> <feGaussianBlur stdDeviation="3" /> </filter></svg>Вы также можете применить цветовую матрицу:
<svg height="0"> <filter> <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> <feConvolveMatrix filterRes="100 100" order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true" /> </filter> <filter> <feSpecularLighting surfaceScale="5" specularConstant="1" specularExponent="10" lighting-color="white"> <fePointLight x="-5000" y="-10000" z="20000" /> </feSpecularLighting> </filter> <filter> <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 1 0 0 0" /> </filter></svg>Пять фильтров применяются с использованием следующего 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.
<p>Time to clean my glasses</p><svg height="0"> <defs> <filter 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)"> Пример текста </text></svg>Использование внешних ссылок
SVG, используемый для отсечения, маскировки и фильтрации, может быть загружен из внешнего источника, если этот источник исходит из того же источника, что и документ HTML, к которому он применяется.
For example, if your CSS is in a file namedit can look like this:Например, если ваш CSS находится в файле с именемdefault.css, он может выглядеть следующим образом:
.target { clip-path: url(resources.svg#c1);}Затем SVG импортируется из файла с именемresources.svg, используя путь клипа с IDc1.