raphaeljs无法处理svg中的旋转矩形

Question

我将一个corel矢量文件导出到svg，然后通过raphael-JS-svg库导入到html / js。

显然，来自corel文件的任何'矩形'在通过raphael-JS渲染时会导致各种问题。

一个问题是矩形周围的边框很粗（参见网页浏览器的右侧屏幕截图）。另一个问题（未显示）是旋转的矩形不存在raphael变换（例如：my_raphael_set.transform( "s.2,.2,0,0" )）。

除了进入corel并更改每个旋转矩形的解决方案之外，还有以下建议：

• 为什么......这种情况发生了吗？
• 怎么......解决它？

通过萤火虫看到的两个矩形之间的比较：

// BAD rectangle .... rotated by corel-author .... 
//                    generates 'transform' property into svg-element
 <rect x="0" y="0" 
       width="4.8969" 
       height="0.937656" 
       r="0" rx="0" ry="0" 
       fill="#00cccc" 
       stroke="#000000" 
       transform="matrix(8.2365,0.3452,0.3452,-8.2365,218.414,436.808)" 
       style="fill-opacity: 0.5;" 
       stroke-width="0.5" 
       data-svg="rect" 
       data-svg-group="Layer_x0020_1" 
       fill-opacity="0.5">



// GOOD rectangle .... not-rotated by corel-author .... 
//                     no 'transform' property into svg-element     
 <rect x="140.07" y="418.729" 
       width="40.3688" 
       height="7.72979" 
       r="0" rx="0" ry="0" 
       fill="#00cccc" 
       stroke="#000000" 
       style="fill-opacity: 0.5;" 
       stroke-width="0.5" 
       data-svg="rect" 
       data-svg-group="Layer_x0020_1" 
       fill-opacity="0.5">

Answer 1

一种可能的解决方案：在corel中，使用编排＆gt;转换为曲线用于旋转的矩形。

理想情况下，我希望raphael以某种方式“处理”旋转的矩形，但毕竟修复了这个修复。