// regular expression to parse numbers
const rxNumberStr = '[+-]?(?:(?:[0-9]+\\.[0-9]+)|(?:\\.[0-9]+)|(?:[0-9]+))(?:[eE][+-]?[0-9]+)?';
// regular expression to parse next lemma from d attribute of <path>
const rxDLemmaStr = `[MmLlHhVvCcSsQqTtAaZz]|${rxNumberStr}`;
// D-attribute string parser
// https://www.w3.org/TR/SVG/paths.html#PathData
// https://www.w3.org/TR/SVG/paths.html#PathDataBNF
class D {
// Result of parsing a D-attribute string
// path: [[cmd, new D.P({x,y}), ...], ...]
path = [];
constructor(d) {
let rx = new RegExp(rxDLemmaStr, 'g');
let ps = d.match(rx).map(v => ('MmLlHhVvCcSsQqTtAaZz'.indexOf(v) > -1 ? v : parseFloat(v)));
let cmd, move, ref = D.P.abs(0, 0);
for (let i = 0, len = ps.length; i < len; ) {
if (isNaN(ps[i])) cmd = ps[i++];
this.path.push(({
m: () => (ref = D.P.rel(ps[i++], ps[i++], ref), ps[i - 3] == cmd ? ['M', move = ref] : ['L', ref]),
M: () => (ref = D.P.rel(ps[i++], ps[i++], ref), ps[i - 3] == cmd ? ['M', move = ref] : ['L', ref]),
l: () => ['L', (ref = D.P.rel(ps[i++], ps[i++], ref))],
L: () => ['L', (ref = D.P.abs(ps[i++], ps[i++], ref))],
h: () => ['H', (ref = D.P.rel(ps[i++], 0, ref))],
H: () => ['H', (ref = D.P.abs(ps[i++], ref.y, ref))],
v: () => ['V', (ref = D.P.rel(0, ps[i++], ref))],
V: () => ['V', (ref = D.P.abs(ref.x, ps[i++], ref))],
c: () => ['C', D.P.rel(ps[i++], ps[i++], ref), D.P.rel(ps[i++], ps[i++], ref), (ref = D.P.rel(ps[i++], ps[i++], ref))],
C: () => ['C', D.P.abs(ps[i++], ps[i++], ref), D.P.abs(ps[i++], ps[i++], ref), (ref = D.P.abs(ps[i++], ps[i++], ref))],
s: () => ['S', D.P.rel(ps[i++], ps[i++], ref), (ref = D.P.rel(ps[i++], ps[i++], ref))],
S: () => ['S', D.P.abs(ps[i++], ps[i++], ref), (ref = D.P.abs(ps[i++], ps[i++], ref))],
q: () => ['Q', D.P.rel(ps[i++], ps[i++], ref), (ref = D.P.rel(ps[i++], ps[i++], ref))],
Q: () => ['Q', D.P.abs(ps[i++], ps[i++], ref), (ref = D.P.abs(ps[i++], ps[i++], ref))],
t: () => ['T', (ref = D.P.rel(ps[i++], ps[i++], ref))],
T: () => ['T', (ref = D.P.abs(ps[i++], ps[i++], ref))],
a: () => ['A', ps[i++], ps[i++], ps[i++], ps[i++], ps[i++], (ref = D.P.rel(ps[i++], ps[i++], ref))],
A: () => ['A', ps[i++], ps[i++], ps[i++], ps[i++], ps[i++], (ref = D.P.abs(ps[i++], ps[i++], ref))],
z: () => (ref = move, ['Z']),
Z: () => (ref = move, ['Z']),
})[cmd]());
}
}
// Compile array with absolute coordinates for new <path d="..." />
get abs() {
return this.path.map(s => s.map((v, i) => (!i ? v : { H: v.x, V: v.y }[s[0]] || v.abs))).flat(3);
}
// Compile array with relative coordinates for new <path d="..." />
get rel() {
return this.path.map(s => s.map((v, i) => !i ? v.toLowerCase() : { H: v.x - v.ref.x, V: v.y - v.ref.y }[s[0]] || v.rel)).flat(3);
}
// Compile array with transformed absolute coordinates for new <path d="..." />
transform(matrix) {
return this.path.map(s => s.map((v, i) => (!i ? v.replace(/[HV]/i,'L') : v.transform(matrix)))).flat(3);
}
// Path Point class
static get P() {
return class P {
x;
y;
// Reference point for relative coordinates
ref;
constructor(props) {
Object.assign(this, props);
}
// Absolute coordinates
get abs() {
return [this.x, this.y];
}
// Relative coordinates
get rel() {
return [this.x - this.ref.x, this.y - this.ref.y];
}
// Transform point with matrix
transform([a, b, c, d, e, f]) {
return [this.x * a + this.y * c + e, this.x * b + this.y * d + f];
}
// Create point from absolute coordinates
static abs = (x, y, ref) => new D.P({ x, y, ref });
// Create point from relative coordinates
static rel = (x, y, ref) => new D.P({ x: ref.x + x, y: ref.y + y, ref });
};
}
}
// Matrix multiplication
// https://en.wikipedia.org/wiki/Matrix_multiplication
const multiply = ([a1, b1, c1, d1, e1, f1], [a2, b2, c2, d2, e2, f2]) => [
a1 * a2 + c1 * b2,
b1 * a2 + d1 * b2,
a1 * c2 + c1 * d2,
b1 * c2 + d1 * d2,
a1 * e2 + c1 * f2 + e1,
b1 * e2 + d1 * f2 + f1,
];
// Consolidate matrix chain
const consolidate = matrices => matrices.reduce((acc, m) => multiply(acc,m), [1, 0, 0, 1, 0, 0]);
// Read SVG element attributes
// https://developer.mozilla.org/en-US/docs/Web/API/SVGElement/attributes
// returns object with attributes
const readAttrs = (element) => [...element.attributes].reduce((acc, { name, value }) => ((acc[name] = value), acc), {});
// Write SVG element attributes
const writeAttrs = (element, attrs) => Object.entries(attrs).forEach(([attr, value]) => element.setAttribute(attr, value));
// Process SVG shape element
// Shape elements are replaced with new <path d="..." /> element
// Shape element attributes are copied to new <path d="..." /> element
// Shape element must not have child elements
// List of shape elements <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>
function processShape(shape) {
const shape2path = {
circle: ({ cx, cy, r, ...attrs }) => [
`M ${[cx - r, cy]} A ${r} ${r} 0 1 1 ${[cx + r, cy]} A ${r} ${r} 0 1 1 ${[cx - r, cy]} Z`,
attrs,
],
line: ({ x1, y1, x2, y2, ...attrs }) => [`M ${[x1, y1]} L ${[x2, y2]}`, attrs],
rect: ({ x, y, width, height, rx = 0, ry = 0, ...attrs }) =>
rx == 0 && ry == 0
? [`M ${[x, y]} h ${width} v ${height} h -${width} Z`, attrs]
: [
`M ${[x + rx, y]} h ${width - 2 * rx} a ${rx} ${ry} 0 0 1 ${rx} ${ry}
v ${height - 2 * ry} a ${rx} ${ry} 0 0 1 -${rx} ${ry}
h -${width - 2 * rx} a ${rx} ${ry} 0 0 1 -${rx} -${ry}
v -${height - 2 * ry} a ${rx} ${ry} 0 0 1 ${rx} -${ry} Z`,
attrs,
],
ellipse: ({ cx, cy, rx, ry, ...attrs }) => [
`M ${[cx - rx, cy]} A ${rx} ${ry} 0 1 1 ${[cx + 2 * rx, cy]}
A ${rx} ${ry} 0 1 1 ${[cx + rx, cy - ry]}
A ${rx} ${ry} 0 1 1 ${[cx + rx, cy + ry]}
A ${rx} ${ry} 0 1 1 ${[cx - rx, cy]} Z`,
attrs,
],
polygon: ({ points, ...attrs }) => [`M ${points} Z`, attrs],
polyline: ({ points, ...attrs }) => [`M ${points}`, attrs],
};
// return if shape inside <pattern>, <mask> or <clipPath>
if (shape.closest('pattern') || shape.closest('mask') || shape.closest('clipPath')) {
return;
}
// create d value for new <path>
let [d, attrs] = shape2path[shape.tagName](readAttrs(shape));
// create new <path>
let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
// write attributes from object to <path>
writeAttrs(path, attrs);
// set attribute "d"
path.setAttribute('d', d);
// replace shape with <path>
shape.replaceWith(path);
return path;
}
// process <path /> element
function processPath(path){
// returns all parent Elements
const getParents = (element)=>{
let parents = [];
while(element !== document.documentElement){
parents.push(element = element.parentNode);
}
return parents;
}
// parse transform matrix
const getMatrix = (transform) => {
let [a, b, c, d, e, f] = transform.match(/^matrix\(([^)]+)\)$/)[1].split(',').map(Number);
return [a, b, c, d, e, f];
}
// parse transform origin
const getOrigin = (transformOrigin) => {
// TODO Parse origin coordinates with units
// from https://source.netsurf-browser.org/libsvgtiny.git/tree/src/svgtiny.c#n1816
let [x, y] = transformOrigin.split(' ').map(value=>value.trim().replace(/[a-z]+$/i,'')).map(Number);
return [x, y];
}
// calc origed matrix from transform and origin
const getOTM = (element) => {
// very useful function for read computed style
let style = getComputedStyle(element);
// no matter how exactly the transform is specified
// (in attributes or in styles or in individual classes),
// the function returns transform always in a matrix form
let transform = style.getPropertyValue('transform');
let transformOrigin = style.getPropertyValue('transform-origin');
// if no transform is acquired
if(!transform || transform == 'none') return [1,0,0,1,0,0];
// parse transform matrix
let matrix = getMatrix(transform);
// parse origin
let origin = getOrigin(transformOrigin);
// return consolidate matrix
return consolidate([
[1,0,0,1,...origin], // + origin
matrix,
[1,0,0,1,...origin.map(v=>-v)] // - origin
]);
}
// return if <path> inside <pattern>, <mask> or <clipPath>
if (path.closest('pattern') || path.closest('mask') || path.closest('clipPath')) {
return;
}
// read element transform matrix
const elementOTM = getOTM(path);
// get all parent elements
const parents = getParents(path);
// clone element transform matrix array
let resultCTM = [1,0,0,1,0,0];
// for each parent
parents.reverse().forEach((parent) => {
// read parent transform matrix
let parentOTM = getOTM(parent);
// calc CTM
resultCTM = consolidate([resultCTM,parentOTM]);
});
consolidate([resultCTM,elementOTM])
// read d attribute, parse it, transform each point and join to single string
let d = new D(path.getAttribute('d')).transform(resultCTM).join(' ');
// this variant returns absolute coordinates without transform
//let d = new D(path.getAttribute('d')).abs.join(' ');
// remove transform attributes
path.removeAttribute('transform');
path.removeAttribute('transform-origin');
// force init transform matrix
//path.style.setProperty('transform','matrix(1,0,0,1,0,0)');
path.style.setProperty('transform-origin', '0 0');
// set d attribute
path.setAttribute('d', d);
// find root element
let svg = path.closest('svg');
if(svg){
// remove element from parent
path.parentNode.removeChild(path);
// add element to root
svg.appendChild(path);
}
return path;
}
// Process <use /> element
function processUse(element) {
// read attributes to object
let attrs = readAttrs(element);
// get href attribute value
let sel = attrs.href;
// find referenced element by href="#id"
let ref = document.querySelector(sel);
// clone referenced element
let clone = ref.cloneNode(true);
// remove id attribute from clone
clone.removeAttribute('id');
// remove href from attribute object
delete attrs.href;
// Create new <g>
let group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
// write attributes from object
writeAttrs(group, attrs);
// add clone to <g>
group.appendChild(clone);
// replace <use> element to <g>
element.replaceWith(group);
return clone;
}
// Create matrix from transform attribute
// This fuction does not used.
// Use of getComputedStyle() completely replaces this implementation
function parseTransform (transform) {
const rxTransformNameStr = '(?:(?:translate|scale|skew)[XY]?)|matrix|rotate';
const rad = a => a / 57.29577951308232;
const { sin, cos, tan } = Math;
const matricies = {
identity: () => [1, 0, 0, 1, 0, 0],
translate: (tx, ty) => [1, 0, 0, 1, tx, ty],
translateX: tx => [1, 0, 0, 1, tx, 0],
translateY: ty => [1, 0, 0, 1, 0, ty],
scale: (sx, sy = sx, cx = 0, cy = 0) => [sx, 0, 0, sy, cx * (1 - sx), cy * (1 - sy)],
scaleX: (sx, cx = 0) => [sx, 0, 0, 1, cx * (1 - sx), 0],
scaleY: (sy, cy = 0) => [1, 0, 0, sy, 0, cy * (1 - sy)],
rotate: (a, cx = 0, cy = 0) => {
let [s, c] = [sin(rad(a)), cos(rad(a))];
return [c, s, -s, c, cx * (1 - c) + cy * s, cy * (1 - c) - cx * s];
},
skew: (ax, ay = ax) => [1, tan(rad(ay)), tan(rad(ax)), 1, 0, 0],
skewX: a => [1, 0, tan(rad(a)), 1, 0, 0],
skewY: a => [1, tan(rad(a)), 0, 1, 0, 0],
matrix: (a, b, c, d, e, f) => [a, b, c, d, e, f],
};
let chain = [...transform.matchAll(new RegExp(`(${rxTransformNameStr})\\(([0-9eE,\\.\\s+-]+)\\)`, 'g'))].map(
([, fn, args]) => [fn, [...args.matchAll(new RegExp(rxNumberStr, 'g'))].map(([num]) => parseFloat(num))]
);
// For example,
// chain = [
// [ 'matrix', [ 1, 0, 0, 1, 0, 0 ] ],
// [ 'translate', [ 100, 100 ] ],
// [ 'rotate', [ 45 ] ],
// [ 'scale', [ 2, 2 ] ],
// ]
chain = chain.map(([fn, args]) => matrices[fn](...args));
// chain = [
// [ 1, 0, 0, 1, 0, 0 ],
// [ 1, 0, 0, 1, 100, 100 ],
// [ 0.7071067811865476, 0.7071067811865475, -0.7071067811865475, 0.7071067811865476, 0, 0 ],
// [ 2, 0, 0, 2, 0, 0 ]
// ]
// returns single matrix
return consolidate(chain);
}
function groupPathList(pathList){
let groupList = [];
const compareStyleEquals = (s1,s2) => Object.entries(s1).every(([k,v])=>'d'==k?true:v==s2[k]);
for(let path of pathList){
let pathStyle = getComputedStyle(path);
let groupFound = false;
for(let group of groupList){
if(compareStyleEquals(group.style,pathStyle)){
group.list.push(path);
groupFound = true;
break;
}
}
if(!groupFound){
groupList.push({
style: pathStyle,
list: [path],
});
}
}
return groupList;
}
function ungroupPathList(groupList){
let pathList = [];
for(let group of groupList){
let newPath = document.createElementNS('http://www.w3.org/2000/svg','path');
Object.entries(getComputedStyle(group.list[0])).forEach(([k,v])=>{if(k!=='d')newPath.style.setProperty(k,v)});
let d = group.list.map(path=>(path.parentNode.removeChild(path),path.getAttribute('d'))).join(' ');
d = d.replace(/[0-9]+\.[0-9]+/g, num => parseFloat(num).toFixed(1));
newPath.setAttribute('d', d);
// this varian to run outside <svg>
document.querySelector('svg').appendChild(newPath);
// this variant to run inside <svg>
//document.documentElement.appendChild(newPath);
pathList.push(newPath);
}
return pathList;
}
setTimeout(()=>{
// TODO: Parse <svg width="" height="" viewBox=""> to common CTM
// Replace all <use /> elements to clone elements referenced by the <use>
document.querySelectorAll('use').forEach(processUse);
// Replace all shape elements to <path />
document.querySelectorAll('line, rect, circle, ellipse, polygon, polyline').forEach(processShape);
// Process all <path /> elements
let pathList = [...document.querySelectorAll('path')].map(processPath).filter(Boolean);
// Group all <path> into groups by style values
let groupList = groupPathList(pathList);
// Convert each group into single <path>
pathList = ungroupPathList(groupList);
// Output new values
console.log(JSON.stringify(pathList.map(path=>new D(path.getAttribute('d')).rel.join(' ')),null,2));
},1000);
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<g transform="translate(-100,-100)">
<g id="hexagon" transform="translate(250,220) scale(1,.5)">
<line id="line" x1="200" x2="500" y1="100" y2="100" stroke="#000" stroke-width="5" />
<g transform="rotate(-120)" transform-origin="500 100">
<use href="#line" />
<g transform="rotate(-120)" transform-origin="200 100">
<use href="#line" />
<g transform="rotate(-120)" transform-origin="500 100">
<use href="#line" />
<g transform="rotate(-120)" transform-origin="200 100">
<use href="#line" />
<g transform="rotate(-120)" transform-origin="500 100">
<use href="#line" />
</g>
</g>
</g>
</g>
</g>
</g>
<g id="hexagon2" transform="translate(250,720) scale(1,.5)">
<line id="line2" x1="200" x2="500" y1="100" y2="100" stroke="#000" stroke-width="5" />
<g transform="rotate(60) translate(-300,0)" transform-origin="200 100">
<use href="#line2" />
<g transform="rotate(60) translate(-300,0)" transform-origin="200 100">
<use href="#line2" />
<g transform="rotate(60) translate(-300,0)" transform-origin="200 100">
<use href="#line2" />
<g transform="rotate(60) translate(-300,0)" transform-origin="200 100">
<use href="#line2" />
<g transform="rotate(60) translate(-300,0)" transform-origin="200 100">
<use href="#line2" />
</g>
</g>
</g>
</g>
</g>
</g>
<use href="#hexagon" transform="scale(1,-1) translate(0,-1200)" />
<rect x="500" y="500" width="200" height="400" fill="#0008" stroke="#000" stroke-width="5" />
<g transform="translate(-100,-100) skewY(-45)" transform-origin="500 500">
<rect x="500" y="500" width="100" height="400" fill="#0004" stroke="#000" stroke-width="5" />
</g>
<g transform="translate(-100,-100) skewY(45)" transform-origin="500 500">
<rect x="500" y="500" width="100" height="400" fill="#0008" stroke="#000" stroke-width="5" />
</g>
<g transform="translate(200,-200) skewY(45)" transform-origin="500 500">
<rect x="500" y="500" width="100" height="400" fill="#0004" stroke="#000" stroke-width="5" />
</g>
<g transform="translate(200,0) skewY(-45)" transform-origin="500 500">
<rect x="500" y="500" width="100" height="400" fill="#0008" stroke="#000" stroke-width="5" />
</g>
<rect x="500" y="300" width="200" height="400" fill="#0004" stroke="#000" stroke-width="5" />
</g>
</svg>
