raphaeljs 无法处理来自 svg 的旋转矩形答案

【问题标题】：raphaeljs unable to handle rotated-rectangles from svgraphaeljs 无法处理来自 svg 的旋转矩形
【发布时间】：2014-05-04 22:28:05
【问题描述】：

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

显然，当通过 raphael-JS 渲染时，corel 文件中旋转的任何“矩形”都会导致各种问题。

一个问题是矩形周围奇怪的粗边框（请参见网络浏览器的右侧屏幕截图）。另一个问题（未显示）是旋转后的矩形无法通过 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">

【问题讨论】：

我认为实际上你需要将一些示例隔离代码和 svg 放在 jsfiddle 或其他东西上。

标签： svg raphael coreldraw

【解决方案1】：

一种可能的解决方案：在 corel 中，对旋转的矩形使用 排列 > 转换为曲线。

理想情况下，我希望 raphael 以某种方式“处理”旋转的矩形，但毕竟 corel-fix 是一种修复。

【讨论】：