JSFiddle - React, Tailwind, and code Playground
HTML
<svg id="svg1" width="320px" height="240px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path xmlns="http://www.w3.org/2000/svg" id="Tanque3_1" style="fill:none;stroke:#000000;stroke-width:1;" d="M112.67636434547,118.592205757055 A20.653697429483,36.3442339312831 0 1 0 113.11318187798,191.271657396572"/>
</svg>
<svg id="svg2" width="320px" height="240px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
JavaScript
SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function (toElement) {
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
};
(function () {
var p2s = /,?([achlmqrstvxz]),?/gi;
var convertToString = function (arr) {
return arr.join(',').replace(p2s, '$1');
};
// Flattens transformations of element or it's children and sub-children
// elem: DOM element
// toCubics: converts all segments to cubics
// toAbsolute: converts all segments to Absolute
// dec: number of digits after decimal separator
// Returns: no return value
function flatten(elem, toCubics, toAbsolute, rectAsArgs, dec) {
if (!elem) return;
if (typeof (rectAsArgs) == 'undefined') rectAsArgs = false;
if (typeof (toCubics) == 'undefined') toCubics = false;
if (typeof (toAbsolute) == 'undefined') toAbsolute = false;
if (typeof (dec) == 'undefined') dec = false;
if (elem && elem.children && elem.children.length) {
for (var i = 0, ilen = elem.children.length; i < ilen; i++) {
//console.log(elem.children[i]);
flatten(elem.children[i], toCubics, toAbsolute, rectAsArgs, dec);
}
elem.removeAttribute('transform');
return;
}
if (!(elem instanceof SVGCircleElement ||
elem instanceof SVGRectElement ||
elem instanceof SVGEllipseElement ||
elem instanceof SVGLineElement ||
elem instanceof SVGPolygonElement ||
elem instanceof SVGPolylineElement ||
elem instanceof SVGPathElement)) return;
path_elem =...