如何在raphael.js文档中添加子svg标签？

Question

I'm using Raphael.js to produce an SVG drawing from Javascript (actually Coffeescript)

However, I'd like to be able to include subdrawings, automatically scaled, by putting them inside a second <svg> tag nested inside the first. Unfortunately the Raphael Paper object which allows me to add rects and paths etc. doesn't have an option for adding svgs.

I've tried to add the tag directly to the DOM in javascript with the following code :

res = document.createElement("svg")
res.setAttribute("x",x)
res.setAttribute("y",y)
res.setAttribute("width",width)
res.setAttribute("height",height)
res.setAttribute("viewBox","0 0 100 100")
res.innerHTML = someInnerSVG
@paper.canvas.appendChild(res)

This seems to update the DOM as expected, adding my new SVG tag as a child of the main outer SVG. However, nothing in this inner actually appears on the screen. (My inner SVG path is scaled within 0 0 100 100 so is within the viewBox.)

The rest of the drawing in the outer SVG, as produced by Raphael, is visible. But nothing of the inner one is.

Should what I'm trying be possible? Any idea what I'm doing wrong?

Answer 1

You should place these sub elements into a Raphael set. From there, you will be able to apply transformations to the set. To transform the set, you would call the transform() method and use the s attribute:

set.transform('s[sx],[sy]');

Where sx is the horizontal scale amount and sy is the vertical scale amount. Remove the brackets when you insert the numbers.

Please refer to the documentation here: http://raphaeljs.com/reference.html#Element.transform The methods for elements apply to sets because sets are pseudo elements.