Problems converting Fireworks exported SVG to Raphaël

Question

I'm trying to convert the following SVG into a Raphaël generated version with an animation:

<?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>

(see http://jsfiddle.net/bBXPA/)

So far I came up with the following:

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();

(see http://jsfiddle.net/3PrcT/4/)

All looks good, except that the location of the rotating part isn't correct. I guess this is because of the matrix.

Is there a way to apply the matrix and keeping the anchor point correct? Or maybe there is a way to prevent Fireworks from using the matrix transformation?

Answer 1

By looking at the source code of the Fireworks SVG exporter, I noticed it only applies matrix transformations to symbols. So by removing all the symbols, it rendered nice paths I could work with.

Answer 2

Have you considered using svg.js with its svg.import.js plugin? You can simply import raw SVG into the library and animate all individual elements afterwards:

/* 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)