JSFiddle - React, Tailwind, and code Playground

by wheresrhys

HTML

<div id="filterTag">If filter tags is supported then this text will be in green, else it will be in red.</div>
    <div id="GaussianBlur">If filter tags is supported then this text will be in green, else it will be in red.</div>
    
    <div id="test">
        <svg
            xmlns='http://www.w3.org' version='1.1'
            xmlns:xlink='http://www.w3.org/1999/xlink'
            width='90%' height='90%'
            viewBox='0 0 100 100'>
            <defs>
                <filter id='blur'>
                    <feGaussianBlur stdDeviation='2' id="feblur" />
                </filter>
                
                <filter
                    xlink:href='#blur'
                    id='blur2'>
                </filter>
            </defs>

            <circle
                cx='20' cy='20' r='20' opacity=".5"
                fill='#700'
                filter='url(#blur)'/>
        </svg>
    </div>

CSS

body{margin:0;}
        #test{height:600px;width:600px;border:solid red 1px}
        rect{
            pointer-events:all;
        }

JavaScript

filterStatus = document.getElementById('filterTag')
gblurStatus = document.getElementById('GaussianBlur')

var filterTag = document.getElementById('blur');
if(filterTag.constructor.toString().indexOf('SVGFilterElement') != -1){
    filterStatus.style.color = "green"
}else{
    filterStatus.style.color = "red"
}

b = document.getElementById('feblur');
if(typeof b.setStdDeviation != 'undefined' ){
    gblurStatus.style.color = "green"
}else{
    gblurStatus.style.color = "red"
}