I’m working on an SVG gauge component that works perfectly in Chrome but has rendering issues in Safari and Firefox. The gauge displays progress using a gradient fill and a rotating pointer. In Chrome, everything renders correctly, but in Safari and Firefox, the gauge is styled incorrectly.
I’ve tried:
- Adjusting the
transform-boxandtransform-originCSS properties. - Modifying the SVG structure and using JavaScript to calculate paths.
Here’s my component: https://codesandbox.io/p/sandbox/falling-meadow-n7jtxr?file=%2Fsrc%2FGauge.jsx%3A6%2C31
In Safari and Firefox, the gauge is not styled correctly, and the progress and pointer rotations are not applied as expected. I’ve tried multiple solutions without success. Any help on making this gauge component render correctly across all browsers would be greatly appreciated.
Edit:
As @RobertLongson stated, “Firefox does not yet support transform-origin on clipPath elements.”, I was able to resolve my issue by applying the transform attribute directly to the path elements.
see updated: https://codesandbox.io/p/sandbox/falling-meadow-n7jtxr?file=%2Fsrc%2FGauge.jsx%3A6%2C31
Question(s):
- Is this the advisable way to handle this?
- The transition on my path is not animating on Firefox or Safari. Does anyone know have an idea what the issue could be? Is this a bug?
user26411203 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3
Here is a solution where I do not rely on CSS transform-box and transform-origin.
I don’t know if it solves the other issues. Please comment and I will try to improve/answer.
document.forms.form01.range.addEventListener('input', e => {
let val = e.target.valueAsNumber;
let val_deg = 180 / 100 * val;
let svg = document.getElementById('svg');
svg.querySelector('.gauge1').setAttribute('transform', `rotate(${val_deg})`);
svg.querySelector('.gauge2').setAttribute('transform', `rotate(${val_deg})`);
let val_extra = (val > 99) ? 110 : val;
svg.querySelector('.meter1').setAttribute('stroke-dasharray', `${val_extra + 50} 200`);
svg.querySelector('.meter2').setAttribute('stroke-dasharray', `${val + 2} 200`);
svg.querySelector('.text').textContent = `${val}%`;
});<div style="width: 300px; margin: 0px auto;">
<div class="container undefined">
<div class="svg-container">
<svg id="svg" viewBox="0 0 172 95">
<defs>
<linearGradient id="lg1" x1="0" y1="75" x2="0" y2="-75"
gradientUnits="userSpaceOnUse">
<stop stop-color="#BC0117" offset="0"></stop>
<stop stop-color="#FF8A35" offset="0.225"></stop>
<stop stop-color="#FFBF0B" offset="0.47"></stop>
<stop stop-color="#C3B30C" offset="0.735"></stop>
<stop stop-color="#008A10" offset="0.96"></stop>
</linearGradient>
<mask id="m1">
<circle transform="rotate(180)" r="74" fill="none"
stroke="white" stroke-width="20" stroke-dasharray="100 200"
pathLength="200" stroke-linecap="round" />
</mask>
<mask id="m2">
<circle r="60" fill="none" stroke="white" stroke-width="4"
stroke-dasharray=".4 9.6" pathLength="300" />
</mask>
<mask id="m3">
<g transform="rotate(90)">
<rect class="gauge1" transform="rotate(45)" fill="white"
x="63.5" y="-2.5" width="21" height="6" rx="2" ry="2" />
</g>
</mask>
</defs>
<g transform="translate(86 85)">
<g mask="url(#m1)">
<circle r="74" fill="none" stroke="#ddd" stroke-width="20" />
<circle class="meter1" r="74" fill="none" stroke="url(#lg1)"
stroke-width="20" transform="rotate(90)"
stroke-dasharray="100 200" stroke-dashoffset="0"
pathLength="200"/>
</g>
<g mask="url(#m2)" transform="rotate(180)">
<circle r="60" fill="none" stroke="#999" stroke-width="5"
pathLength="200" />
<circle class="meter2" r="60" fill="none" stroke="black"
stroke-width="5" pathLength="200" stroke-dasharray="50 200" />
</g>
<circle transform="rotate(90)" mask="url(#m3)" r="74"
fill="none" stroke="url(#lg1)" stroke-width="20" />
<g transform="rotate(180)">
<rect class="gauge2" transform="rotate(90)" stroke-width="1"
stroke="#ffe40d" fill="black" fill-opacity=".2" x="63.5"
y="-2.5" width="21" height="6" rx="2" ry="2" />
</g>
</g>
<text x="50%" y="50%" dominant-baseline="middle"
text-anchor="middle" font-size="15" class="text">50%</text>
</svg>
</div>
</div>
<form name="form01">
<input name="range" type="range" min="0" max="100"
style="width: 300px; margin: 20px auto; display: block;" value="50">
</form>
</div>