I Have a square SVG that I want to create into a diamond, rotating it 45 degrees gives me the effect I want but I am limited to only using the d value of an SVG for my image. How can I get the newly transform d value from https://jsfiddle.net/x2v3tmdp/
In other words here is my d: M13,14H2c-0.5523,0-1-0.4477-1-1V2c0-0.5523,0.4477-1,1-1h11c0.5523,0,1,0.4477,1,1v11C14,13.5523,13.5523,14,13,14z now I need to rotate that 45 degrees and get the new d value.
If you want to process an SVG file to remove all the transforms and bake them into the path data, you can use svgo for that.
If you want to do it in code yourself, Timo's anser on this question should do what you need.
I would add transform matrix so the d values do not need to change
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -5 20 35">
<g fill="none" stroke-width="1px">
<path stroke="black" transform="matrix(1.000000,0.000000,0.000000,1.000000,0.000000,0.000000)" d="M13,14H2c-0.5523,0-1-0.4477-1-1V2c0-0.5523,0.4477-1,1-1h11c0.5523,0,1,0.4477,1,1v11C14,13.5523,13.5523,14,13,14z"/>
<path stroke="blue" transform="matrix(0.707107,0.707107,-0.707107,0.707107,0.000000,0.000000)" d="M13,14H2c-0.5523,0-1-0.4477-1-1V2c0-0.5523,0.4477-1,1-1h11c0.5523,0,1,0.4477,1,1v11C14,13.5523,13.5523,14,13,14z"/>
</g>
</svg>
Where the transform represents 3x3 homogenuous transform matrix:
transform="matrix
(
x_scale*cos(x_ang),x_scale*sin(x_ang),
y_scale*cos(y_ang),y_scale*sin(y_ang),
x_offset,y_offset
)"
where x_ang is your rotation angle of x axis, y_ang=x_ang+90deg is rotation angle of y axis (if not perpendicular to x then you got skew), x(y)_scale is the scale in each axis (1.0) and x(y)_offset is the origin of new coordinate system in the parent coordinate system so you can use ti to translate/pan stuff.
