问题将Fireworks导出SVG拉斐尔

我想下面的SVG转换成拉斐尔生成的版本与动画：问题将Fireworks导出SVG拉斐尔

<?xml version="1.0" standalone="no"?> 
<!-- Generator: Adobe Fireworks 10, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1 --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg id="Untitled-Page%201" viewBox="0 0 100 111" style="background-color:#00ff00" version="1.1" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" 
    x="0px" y="0px" width="100px" height="111px" 
> 
    <defs> 
     <!-- Library --> 
     <symbol id="Symbol7" overflow="visible"> 
      <g id="Layer%2012"> 
       <rect opacity="0.102" visibility="hidden" x="-68" y="-68" width="136" height="136" fill="#00ff00"/> 
       <path d="M 1.964 8.4182 C 1.964 8.4182 -1.9607 7.3584 -4.8882 4.2425 C -7.8613 1.0781 -9.5322 -3.5466 -9.5322 -3.5466 C -9.5322 -3.5466 -22.138 4.0587 -28.0532 13.8565 C -33.8893 23.5231 -37.5239 30.9637 -37.2234 33.1765 C -36.9248 35.3741 -37.1771 36.8259 -31.7543 36.0133 C -26.3864 35.2091 -14.8159 27.574 -10.2729 23.8916 C -5.7305 20.2096 1.7584 11.2903 1.964 8.4182 Z" fill="#00ff00"/> 
       <path d="M -1.9046 8.9519 C -1.9046 8.9519 -4.8987 8.475 -6.9209 6.2908 C -8.9745 4.0727 -9.8701 0.5879 -9.8701 0.5879 C -9.8701 0.5879 -20.4872 7.7134 -26.0352 15.9551 C -31.5089 24.0864 -35.0469 30.2674 -35.0112 31.9801 C -34.9758 33.6811 -35.3063 34.8456 -30.9624 33.714 C -26.6625 32.5939 -16.8578 25.5391 -12.946 22.2308 C -9.0346 18.9229 -2.3273 11.229 -1.9046 8.9519 Z" fill="#ffffff"/> 
       <path d="M -8.9652 -2.9558 C -8.9652 -2.9558 -6.085 -5.8247 -1.9229 -6.8021 C 2.3041 -7.7946 7.1447 -6.9294 7.1447 -6.9294 C 7.1447 -6.9294 6.8612 -21.6489 1.3337 -31.6706 C -4.1198 -41.558 -8.7462 -48.4261 -10.8128 -49.2722 C -12.8653 -50.1124 -13.9965 -51.0568 -16.0041 -45.9543 C -17.9916 -40.9034 -17.1647 -27.0654 -16.2471 -21.2899 C -15.3297 -15.5151 -11.3498 -4.5699 -8.9652 -2.9558 Z" fill="#00ff00"/> 
       <path d="M -7.4931 -6.5729 C -7.4931 -6.5729 -5.5831 -8.9275 -2.6805 -9.5866 C 0.2674 -10.256 3.7331 -9.2893 3.7331 -9.2893 C 3.7331 -9.2893 2.8708 -22.0467 -1.4928 -30.9723 C -5.7979 -39.7782 -9.3818 -45.9327 -10.8828 -46.7582 C -12.3736 -47.578 -13.2169 -48.4465 -14.4088 -44.1188 C -15.5888 -39.8349 -14.3814 -27.8164 -13.4723 -22.7745 C -12.5632 -17.7332 -9.2538 -8.0776 -7.4931 -6.5729 Z" fill="#ffffff"/> 
       <path d="M 6.2399 -7.148 C 6.2399 -7.148 7.2844 -3.2192 6.0497 0.874 C 4.7958 5.0309 1.6261 8.7904 1.6261 8.7904 C 1.6261 8.7904 14.5154 15.9046 25.9582 16.1285 C 37.2477 16.3494 45.5088 15.7768 47.2748 14.4101 C 49.0288 13.0527 50.4122 12.5453 46.9971 8.2553 C 43.6167 4.0087 31.2192 -2.1941 25.7587 -4.2872 C 20.2987 -6.3801 8.83 -8.4061 6.2399 -7.148 Z" fill="#00ff00"/> 
       <path d="M 8.6363 -4.0646 C 8.6363 -4.0646 9.7204 -1.2332 8.84 1.6102 C 7.9458 4.4977 5.3757 7.0158 5.3757 7.0158 C 5.3757 7.0158 16.8551 12.6477 26.7666 13.3315 C 36.5454 14.0062 43.6673 13.9797 45.1327 13.0925 C 46.5881 12.2113 47.7618 11.9153 44.6099 8.7192 C 41.4899 5.5554 30.4779 0.5917 25.6569 -1.1419 C 20.8365 -2.8753 10.8198 -4.837 8.6363 -4.0646 Z" fill="#ffffff"/> 
      </g> 

     </symbol> 
     <!-- End Library --> 

    </defs> 
    <g id="Layer%201"> 
     <path id="Ellipse" d="M 43.522 49.8713 C 43.522 46.5576 46.2082 43.8713 49.522 43.8713 C 52.8357 43.8713 55.522 46.5576 55.522 49.8713 C 55.522 53.1851 52.8357 55.8713 49.522 55.8713 C 46.2082 55.8713 43.522 53.1851 43.522 49.8713 Z" fill="#ffffff"/> 
     <path d="M 41.522 101.8713 L 44.522 58.8713 L 54.522 58.8713 L 57.522 101.8713 L 62.522 102.8713 C 62.522 102.8713 66.897 102.8713 68.522 105.8713 C 70.147 108.8713 69.522 110.8713 69.522 110.8713 L 29.522 110.8713 C 29.522 110.8713 30.022 106.6213 32.522 104.8713 C 35.022 103.1213 35.522 102.8713 35.522 102.8713 L 41.522 101.8713 Z" fill="#ffffff"/> 
     <use id="Symbol%207" xlink:href="#Symbol7" transform="matrix(1, 0, 0, 1, 50, 50)"/> 
    </g> 
</svg>

（见http://jsfiddle.net/bBXPA/）

到目前为止，我想出了以下：

var attrs = { 
    "fill": "#ffffff", 
    "stroke": "#ffffff" 
}; 
var paper = Raphael("container", 100, 111); 
var st = paper.set(); 
st.push(
    paper.path("M -1.9046 8.9519 C -1.9046 8.9519 -4.8987 8.475 -6.9209 6.2908 C -8.9745 4.0727 -9.8701 0.5879 -9.8701 0.5879 C -9.8701 0.5879 -20.4872 7.7134 -26.0352 15.9551 C -31.5089 24.0864 -35.0469 30.2674 -35.0112 31.9801 C -34.9758 33.6811 -35.3063 34.8456 -30.9624 33.714 C -26.6625 32.5939 -16.8578 25.5391 -12.946 22.2308 C -9.0346 18.9229 -2.3273 11.229 -1.9046 8.9519 Z"), 
    paper.path("M -7.4931 -6.5729 C -7.4931 -6.5729 -5.5831 -8.9275 -2.6805 -9.5866 C 0.2674 -10.256 3.7331 -9.2893 3.7331 -9.2893 C 3.7331 -9.2893 2.8708 -22.0467 -1.4928 -30.9723 C -5.7979 -39.7782 -9.3818 -45.9327 -10.8828 -46.7582 C -12.3736 -47.578 -13.2169 -48.4465 -14.4088 -44.1188 C -15.5888 -39.8349 -14.3814 -27.8164 -13.4723 -22.7745 C -12.5632 -17.7332 -9.2538 -8.0776 -7.4931 -6.5729 Z"), 
    paper.path("M 8.6363 -4.0646 C 8.6363 -4.0646 9.7204 -1.2332 8.84 1.6102 C 7.9458 4.4977 5.3757 7.0158 5.3757 7.0158 C 5.3757 7.0158 16.8551 12.6477 26.7666 13.3315 C 36.5454 14.0062 43.6673 13.9797 45.1327 13.0925 C 46.5881 12.2113 47.7618 11.9153 44.6099 8.7192 C 41.4899 5.5554 30.4779 0.5917 25.6569 -1.1419 C 20.8365 -2.8753 10.8198 -4.837 8.6363 -4.0646 Z") 
); 
st.attr(attrs); 

paper.path("M 43.522 49.8713 C 43.522 46.5576 46.2082 43.8713 49.522 43.8713 C 52.8357 43.8713 55.522 46.5576 55.522 49.8713 C 55.522 53.1851 52.8357 55.8713 49.522 55.8713 C 46.2082 55.8713 43.522 53.1851 43.522 49.8713 Z").attr(attrs); 
paper.path("M 41.522 101.8713 L 44.522 58.8713 L 54.522 58.8713 L 57.522 101.8713 L 62.522 102.8713 C 62.522 102.8713 66.897 102.8713 68.522 105.8713 C 70.147 108.8713 69.522 110.8713 69.522 110.8713 L 29.522 110.8713 C 29.522 110.8713 30.022 106.6213 32.522 104.8713 C 35.022 103.1213 35.522 102.8713 35.522 102.8713 L 41.522 101.8713 Z").attr(attrs); 

var animate = function() { 
    st.attr({ 
     transform: "0,0,0" 
    }).animate({ 
     transform: "r360,0,0" 
    }, 3000, animate); 
}; 
animate();

（见）

除了旋转部分的位置不正确外，所有外观都很好。我想这是因为矩阵。

有没有办法应用矩阵并保持锚点正确？或者也许有办法阻止Fireworks使用矩阵转换？

来源

2013-06-28 sroes

通过看the source code of the Fireworks SVG exporter，我注意到它仅适用矩阵转换为符号。所以通过删除所有符号，它可以提供我可以使用的很好的路径。

来源

2013-06-28 14:02:58 sroes

您是否考虑过使用svg.js及其svg.import.js插件？你可以简单地进口原材料SVG到库事后动画所有单个元素：

/* enable canvas */ 
var draw = SVG('canvas') 

/* import your data */ 
var store = draw.svg(yourRawSVGdata) 

/* animate element with id "Ellipse" */ 
store.Ellipse.animate().move(100,200)

来源

2013-06-28 12:53:31 wout

我知道我可以使用svg.js或jQuery svg之类的东西，但我希望它也可以在较旧的浏览器上工作。 – sroes

好吧，我明白了。我为Raphael编写了一个插件来导入svg：https：//github.com/wout/raphael-svg-import。虽然它不再被积极开发，因为我转移到svg.js所有我的项目。 – wout

看起来不错，但导入SVG路径不是问题。问题在于矩阵转换，并且就我所见，您的插件也无法正确处理此问题。 – sroes

问题将Fireworks导出SVG拉斐尔

回答

相关问题