Comment utiliser le flou gaussien sur la page svg en html5

Cet article présente principalement les informations pertinentes sur la façon dont html5 utilise le flou gaussien sur les pages svg. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Mettez d'abord ce code dans n'importe quelle zone de la page

stdDeviation définit la quantité de flou, le minimum est 0

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

Appelez l'effet de flou sur le dom

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

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

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo HTML5 !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Tutoriel graphique HTML5

Manuel HTML5 en ligne

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!