JSFiddle - React, Tailwind, and code Playground

by Josh Carroll

HTML

<div id="support-true" style="visibility:hidden;">
    Supports "dominant-baseline" attribute!
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 0; width: 0">
    <defs>
        <linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="grayBar">
            <stop stop-color="#CCCCCC" offset="0%"></stop>
            <stop stop-color="#888888" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="favorableBar">
            <stop stop-color="#BED941" offset="0%"></stop>
            <stop stop-color="#94C05C" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="lightFavorableBar">
            <stop stop-color="#DAE6BA" offset="0%"></stop>
            <stop stop-color="#BED941" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="favorableBarSig">
            <stop stop-color="#59B220" offset="0%"></stop>
            <stop stop-color="#527234" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="uf1bar">
            <stop stop-color="#FCC9C5" offset="0%"></stop>
            <stop stop-color="#D9A5A0" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="uf2bar">
            <stop stop-color="#EEB7AF" offset="0%"></stop>
            <stop stop-color="#DDA77A" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="unfavorableBar">
            <stop stop-color="#E1ABA5" offset="0%"></stop>
            <stop stop-color="#CE7871" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="unfavorableBarSig">
            <stop stop-color="#EB796E" offset="0%"></stop>
            <stop stop-color="#943833" offset="100%"></stop>
        </linearGradient>
       ...

JavaScript

(function(){

    function elementSupportsAttribute(element, attribute) {
        debugger;
  var test = document.createElement(element);
  if (attribute in test) {
    return true;
  } else {
    return false;
  }
};

    if(elementSupportsAttribute("text", "dominant-baseline")){
        document.getElementById("support-true").style.visibility = "visible";
    }
    
}());