JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<svg class="speed-o-meter  speed-o-meter--compact" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="75" height="75" viewBox="0 0 48 48" svg preserveAspectRatio="xMidYMid">
                    <g class="svg-definitions">
                        {* This are the core definitions used for all instanties of the speed-o-meter icon *}
                        <defs>
                            <path id="a" class="meter-frame--mask" d="M24 0c13.253 0 24 10.746 24 24h-48c0-13.254 10.746-24 24-24z"/>
                            <g id="meter-frame">
                                <circle id="meter-frame__circle--outer" clip-path="url(#b)" fill="none" stroke="#191919" stroke-width="0.9" cx="24" cy="24" r="19.8"/>
                                <circle id="meter-frame__circle--inner" clip-path="url(#b)" fill="none" stroke="#191919" stroke-width="0.9" cx="24" cy="24" r="13.85"/>
                                <path id="meter-frame--outer" fill="#191919" d="M24,0C10.767,0,0,10.767,0,24v1.051h48V24C48,10.767,37.232,0,24,0z M2.126,22.948
            C2.677,11.36,12.278,2.102,24,2.102c11.723,0,21.323,9.259,21.874,20.847L2.126,22.948z"/>
                            </g>
                            <path id="indicator--band" stroke="#191919" stroke-width="6.4" stroke-miterlimit="10"
                                  d="M7.225 24c0-9.264 7.511-16.775 16.775-16.775s16.775 7.511 16.775 16.775"/>
                            <path id="indicatorArm" stroke-miterlimit="10" d="M25.037 26.657l17.867-1.335c.916.001 1.654-.591 1.656-1.322-.002-.731-.74-1.323-1.656-1.322l-17.867-1.334c-.455-.264-.976-.426-1.539-.426-1.701 0-3.082 1.38-3.082 3.083s1.381 3.083 3.082 3.083c.564-.001 1.084-.163 1.539-.427z"/>
                         
                        </defs>
                        <clipPath id="b">
                            <use xlink:href="#a" overflow="visible"/>
                        </clipPath>
                    </g>
                    <svg...

JavaScript

// Firefox SVG 'use' bug 
// All works. The SVG 'use' element in combination with Angluar doesn't work. There are two solutions
// 1: use a AngularJS directive
// 2: replace relative paths with absolute versions