meszaros-lajos-gyorgy/raphael-plugin-group

Group tag support for RaphaelJS

Group plugin for RaphaelJS

A RaphaelJS plugin, which adds support for the SVG <g> tag.

Original notes by: Matthew Taylor

This is an updated version of the Raphael.group.js plugin. It adds support for moving groups and scaling the X and Y axis independently.

WARNING: These plugins were not tested in IE, and I don't care.

These are plugins I've created for the RaphaelJS library (http://raphaeljs.com/ => https://github.com/DmitryBaranovskiy/raphael) for my own personal use. Feel free to use them as well.

Update

If you don't need to worry about IE8 (or below) users, then I suggest you to migrate over to the newer SnapSVG library, which is more lightweight, produced by the same author, has a similar syntax and has all the features of SVG covered, that was missing from RaphaelJS, including groups.

RaphaelJS tries to even out the differences between SVG and the old, outdated Microsoft Vector Markup Language (VML). It only supports features, which are present in both SVG and VML, and grouping is only supported in SVG.

Links

• SnapSVG homepage
• RaphaelJS project

Requirements

Though raphael.group.js may work in a browser as old as IE8, it uses some Javascript features, which might not be supported by that browser. For this purpose a separate polyfills.js can be included among the plugins as a patch.

raphael-plugin-group's Issues

Cannot read property 'match' of null

Hi, wow, thank you!
Just noticed when dragging a group trough draggable(), the first time it logs an error:

Cannot read property 'match' of null

Multiple transformation in SVG group elements are applied from right to left

According to https://www.dashingd3js.com/svg-group-element-and-d3js

The SVG Transform Attribute applies a list of transformations to an element and it's children.
Each transform definition is separated by white space and or commas.

Example given:

<g transform="translate(...) scale(...) rotate(...) translate(...) rotate(...)">

The transformations are applied from right to left.
They are applied right to left because they are treated as nested transforms.

I know it's not an issue and to keep things simple it's not handled. But just leaving it here since I found it quite interesting.

group.push(set)

Allow the push() function to accept Raphael set objects.

I cannot drag a group

I saw that there is a draggable function but I could not drag a group. Can you please add an example?
I tried this:

group.drag(movf,startf,endf)