JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<?xml version="1.0" encoding="UTF-8"?>
<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.5 283.5">
  <path d="m283.5,141.7c0,78.3-63.5,141.7-141.7,141.7v-141.7H0C0,63.5,63.5,0,141.7,0s141.7,63.5,141.7,141.7Z" style="fill:red;" />
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<svg id="b" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.5 283.5">
  <circle cx="141.7" cy="141.7" r="141.7" style="fill:blue;" />
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<svg id="c" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.5 283.5">
  <path d="m283.5,141.7c0,78.3-63.5,141.7-141.7,141.7s-74.6-15.9-100.2-41.5l100.2-100.2H0C0,63.5,63.5,0,141.7,0s141.7,63.5,141.7,141.7Z" style="fill:#fff;" />
</svg>

JavaScript

$(document).ready(function() {
  var path = $('#a path');
  var bbox = path[0].getBBox();
  var thickness = parseFloat(path.css('stroke-width'));
  var area = bbox.width * bbox.height * thickness;
  console.log('Area of path inside SVG:', area);
});