0

我使用矢量程序来绘制和旋转一个盒子形状并将其导出为 svg 文件。

我的目标是用 javascript 读取这个 svg 数据并用它来创建一个匹配的 div。div 应绝对定位并使用 css3 旋转以匹配 svg 框的形状、位置和角度。

这可能是一个相当大的挑战（至少对我来说），所以我不确定完成这项任务的最佳方法是什么。svg 代码如下所示：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"               xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600"   xml:space="preserve">
<rect x="172.5" y="154.5" transform="matrix(0.8779 -0.4788 0.4788 0.8779 -68.2383     143.3385)" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="149"      height="102"/>
 </svg>

我想可以直接使用 rect x 和 y 值来定义 div 的宽度和高度。但是如何确定css的正确旋转值..

4

1 回答 1

1

SVG 变换等效于使用 matrix() 的 -x-transforms。基本上你想使用 SVG 矩阵并添加逗号。

因此，您的 SVG 转换相当于：

-webkit-transform: matrix(0.8779 ,-0.4788 ,0.4788 ,0.8779, -68.2383,143.3385);

http://jsfiddle.net/8P76p/

（顺便说一句，这不是纯粹的旋转，而是旋转+平移。）

于 2013-10-01T21:37:44.080 回答