转换后获取SVG d

Question

我有一个方形SVG，我想创建一个钻石，旋转它45度给我我想要的效果但我只能使用SVG的d值作为我的图像。如何从https://jsfiddle.net/x2v3tmdp/

获取新变换的d值

换句话说，这是我的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

如果要处理SVG文件以删除所有变换并将其烘焙到路径数据中，you can use svgo就可以了。

如果你想自己在代码中做，Timo's anser on this question应该做你需要的。

Answer 2

我会添加变换矩阵，因此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是每个轴的刻度axis（1.0）和x(y)_offset是父坐标系中新坐标系的原点，因此您可以使用ti来翻译/平移东西。