简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

ページのガウスぼかしを実装する SVG コード

不言
リリース： 2018-07-19 17:23:20
オリジナル
1543 人が閲覧しました

この記事で共有した内容は、svg を使用してページのガウスぼかしを実現することに関するもので、必要な友人は参照できます。

最初にこのコードをページの任意の領域に配置します
stdDeviationでぼかしの量を設定します。最小値は0です

<svg style="display:none">
    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="1"/>
    </filter>
    <filter id="blur-effect-2">
        <feGaussianBlur stdDeviation="2"/>
    </filter>
</svg>
ログイン後にコピー

DOMのぼかし効果を呼び出します

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

document.body.removeAttribute("style");//关闭模糊效果
ログイン後にコピー

関連する推奨事項:

JSの使用方法svgで絵を描く

以上がページのガウスぼかしを実装する SVG コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
html5 svg
ソース：php.cn
前の記事：Vue の非同期コンポーネント関数の簡単な分析 次の記事：JavaScript での this のソフト バインディングについて説明する記事
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Angular で円形の SVG 温度ドラッガーを作成しますか? これは、Angular で作成しようとしている円形の親指ドラッガーの静的なデモンストレーションです。これは、rinkle-dashoffset="-260" 設...
から 2024-04-03 09:33:29
0
1
376
SVGをインラインでロードして塗りつぶしの色を変更する SVG は次のように使用します。<imagex="0"y="0"width="40"height="40...
から 2024-04-02 13:32:42
0
1
321
D3で地図を作成しても国データが表示されない topojson から D3 を使用して地図を作成しましたが、HTML には国のデータがまだ表示されていません。こんにちは、みんな！ topojson ファイルから d3 を使用し...
から 2024-04-02 10:29:33
0
1
282
SVG - 複数のグラデーション塗りつぶしのある醜いエッジ JavaScript カラーピッカーを作成したいと考えています。 SVG を使用して、次のような色の三角形を作成しています。 body{background:black;}<...
から 2024-04-01 20:00:27
0
1
289
Reactjs SVG アイコンは同じ CSS にもかかわらずサイズが異なります 私はreactjsを使ってウェブサイトを構築するのは初めてです。私は React Icon Library の ReactJS アイコンを使用しています。これらのアイコンが Web...
から 2024-04-01 13:18:38
0
1
355
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！