ベクトル プログラムを使用してボックス形状を描画および回転し、それを svg ファイルとしてエクスポートしました。
私の目標は、この svg データを JavaScript で読み取り、それを使用して一致する div を作成することです。div は、svg ボックスの形状、位置、および角度に一致するように、css3 で絶対に配置および回転する必要があります。
これは（少なくとも私にとっては）かなりの挑戦になるかもしれないので、このタスクに取り組むための最良の方法が何であるかはわかりません。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の正しい回転値を決定する方法..