Question

我使用矢量程序绘制和旋转框形状，并将其导出为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的正确旋转值。

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

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

将svg框转换为css3旋转的div

1 个答案: