Получение SVG d после преобразования

Question

У меня есть квадратный SVG, который я хочу создать в ромб, вращение его на 45 градусов дает мне нужный эффект, но я ограничен только использованием значения d SVG для своего изображения. Как я могу получить недавно преобразованное значение d из https://jsfiddle.net/x2v3tmdp/

Другими словами, вот мой 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 Теперь мне нужно повернуть на 45 градусов и получить новое значение d.

Answer 1

Я бы добавил матрицу преобразования, чтобы значения d не нужно было менять

<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>

Где преобразование представляет собой матрицу однородного преобразования 3x3:

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
  )"

, где x_ang - ваш угол поворота оси x, y_ang=x_ang+90deg - угол поворота оси y (если не перпендикулярно x, то вы получили перекос), x(y)_scale - это масштаб по каждой оси (1.0) x(y)_offset - это начало новой системы координат в родительской системе координат, поэтому вы можете использовать ti для перевода / панорамирования.

Answer 2

Если вы хотите обработать SVG-файл, чтобы удалить все преобразования и вставить их в данные пути, вы можете использовать svgo для этого.

Если вы хотите сделать это в коде самостоятельно, Ответ Тимо на этот вопрос должен сделать то, что вам нужно.