Skip to content

Instantly share code, notes, and snippets.

@zazaulola
Last active October 29, 2021 09:00
Show Gist options
  • Save zazaulola/fdad4ac2bebc16fe5a5ba0b95fe65bff to your computer and use it in GitHub Desktop.
Save zazaulola/fdad4ac2bebc16fe5a5ba0b95fe65bff to your computer and use it in GitHub Desktop.
SVG path d attribute derelative
function derelativePathD(d,fixed){
let steps = d
.replace(/[,\s]+/g,' ')
.replace(/-\./g,'-0.')
.replace(/(?<=\.\d+)\./g,' 0.')
.split(/([MmLlAaCcSsQqTtVvHhZz])/g)
.splice(1)
.map((v,i) => !(i%2) ? v : v
.split(/\s+/g)
.map(v=>v.split(/(-?[\d]*(?:\.\d+)?(?:e-?\d{1,2})?)/g)
.filter(Boolean))
.flat(1)
.map(v=>parseFloat(v))
);
let x,y,output=[];
for(let i=0;i<steps.length;i+=2){
let mode = steps[i], p = steps[i+1];
if(mode=="Z"||mode=="z") {
output.push(mode);
}
if(mode=="M"){
x=p.shift();
y=p.shift();
output.push('M',x.toFixed(fixed),y.toFixed(fixed));
mode='L';
}
if(mode=='m'){
x+=p.shift();
y+=p.shift();
output.push('M',x.toFixed(fixed),y.toFixed(fixed));
mode='l';
}
if(mode=='L'){
while(p.length) {
x=p.shift();
y=p.shift();
output.push('L',x.toFixed(fixed),y.toFixed(fixed));
}
}
if(mode=='l'){
while(p.length) {
x+=p.shift();
y+=p.shift();
output.push('L',x.toFixed(fixed),y.toFixed(fixed));
}
}
if(mode=='S'){
while(p.length) {
let x2, y2;
x2=p.shift();
y2=p.shift();
x=p.shift();
y=p.shift();
output.push('S',x2.toFixed(fixed),y2.toFixed(fixed),x.toFixed(fixed),y.toFixed(fixed));
}
}
if(mode=='s'){
while(p.length) {
let x2=x, y2=y;
x2+=p.shift();
y2+=p.shift();
x+=p.shift();
y+=p.shift();
output.push('S',x2.toFixed(fixed),y2.toFixed(fixed),x.toFixed(fixed),y.toFixed(fixed));
}
}
if(mode=='C'){
while(p.length) {
let x1,x2,y1,y2;
x1=p.shift();
y1=p.shift();
x2=p.shift();
y2=p.shift();
x=p.shift();
y=p.shift();
output.push('C',x1.toFixed(fixed),y1.toFixed(fixed),x2.toFixed(fixed),y2.toFixed(fixed),x.toFixed(fixed),y.toFixed(fixed));
}
}
if(mode=='c'){
while(p.length) {
let x1=x,x2=x,y1=y,y2=y;
x1+=p.shift();
y1+=p.shift();
x2+=p.shift();
y2+=p.shift();
x+=p.shift();
y+=p.shift();
output.push('C',x1.toFixed(fixed),y1.toFixed(fixed),x2.toFixed(fixed),y2.toFixed(fixed),x.toFixed(fixed),y.toFixed(fixed));
}
}
if(mode=='Q'){
while(p.length) {
let x1, y1;
x1=p.shift();
y1=p.shift();
x=p.shift();
y=p.shift();
output.push('Q',x1.toFixed(fixed),y1.toFixed(fixed),x.toFixed(fixed),y.toFixed(fixed));
}
}
if(mode=='q'){
while(p.length) {
let x1=x, y1=y;
x1+=p.shift();
y1+=p.shift();
x+=p.shift();
y+=p.shift();
output.push('Q',x1.toFixed(fixed),y1.toFixed(fixed),x.toFixed(fixed),y.toFixed(fixed));
}
}
if(mode=='T'){
while(p.length) {
x=p.shift();
y=p.shift();
output.push('T',x.toFixed(fixed),y.toFixed(fixed));
}
}
if(mode=='t'){
while(p.length) {
x+=p.shift();
y+=p.shift();
output.push('T',x.toFixed(fixed),y.toFixed(fixed));
}
}
if(mode=='A'){
while(p.length) {
let rx=p.shift();
let ry=p.shift();
let a=p.shift();
let lf=p.shift();
let sf=p.shift();
x=p.shift();
y=p.shift();
output.push('A',rx.toFixed(fixed),ry.toFixed(fixed),a.toFixed(fixed),lf,sf,x.toFixed(fixed),y.toFixed(fixed));
}
}
if(mode=='a'){
while(p.length) {
let rx=p.shift();
let ry=p.shift();
let a=p.shift();
let lf=p.shift();
let sf=p.shift();
x+=p.shift();
y+=p.shift();
output.push('A',rx.toFixed(fixed),ry.toFixed(fixed),a.toFixed(fixed),lf,sf,x.toFixed(fixed),y.toFixed(fixed));
}
}
if(mode=='v'){
while(p.length) {
y+=p.shift();
output.push('V',y.toFixed(fixed));
}
}
if(mode=='V'){
while(p.length) {
y=p.shift();
output.push('V',y.toFixed(fixed));
}
}
if(mode=='h'){
while(p.length) {
x+=p.shift();
output.push('H',x.toFixed(fixed));
}
}
if(mode=='H'){
while(p.length) {
x=p.shift();
output.push('H',x.toFixed(fixed));
}
}
}
return output.join` `;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment