Heim >Web-Frontend >js-Tutorial >SVG-Code zum Implementieren der Seiten-Gaußschen Unschärfe

SVG-Code zum Implementieren der Seiten-Gaußschen Unschärfe

不言
不言Original
2018-07-19 17:23:201597Durchsuche

Der Inhalt, der in diesem Artikel mit Ihnen geteilt wird, befasst sich mit der Verwendung von SVG zur Erzielung einer Gaußschen Unschärfe auf der Seite. Freunde in Not können sich darauf beziehen.

Fügen Sie diesen Code zuerst in einen beliebigen Bereich der Seite ein
stdDeviation legt den Unschärfegrad fest, das Minimum ist 0

<svg style="display:none">
    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="1"/>
    </filter>
    <filter id="blur-effect-2">
        <feGaussianBlur stdDeviation="2"/>
    </filter>
</svg>

Rufen Sie den Unschärfeeffekt auf dem Dom auf

document.body.style.filter='url(#blur-effect-2)' //调用2级模糊量

document.body.removeAttribute("style");//关闭模糊效果

Verwandte Empfehlung:

So bedienen Sie SVG mit JS, um Bilder zu zeichnen

Das obige ist der detaillierte Inhalt vonSVG-Code zum Implementieren der Seiten-Gaußschen Unschärfe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn