Robert Longson

You can nest svg elements and therefore have separate viewboxes. <svg> <svg viewBox="<something>"> <path/> </svg> <svg viewBox="<something else>"> <path/> </svg> <svg viewBox="<something else again>"> <path/> </svg> </svg>

I don't think any browsers currently support the CSS transform-box property. Firefox has a complete implementation of transform-box but it's hidden behind the svg.transform-box.enabled pref which is off by default. You can enable the pref by typing about:config in the Firefox address bar and then typing in some of the pref text. Since Chrome's implementation of transform-origin does not match the appropriate specification the Firefox implementors don't know whether the specification will change to match Chrome or whether Chrome will change to match the specification.Once that's decided we'll match whatever the specification says and enable our transform-box code. As to your paths, I assume one of them is drawn centred on the viewBox centre so that rotates about itself (for that object the viewBox centre and fill-box centre coincide), the others are not drawn at the centre of the viewBox. Of course each path is roughly round so its fill-box centre is the centre of the shape which is why they rotate round their individual origins in Chrome. The fill-box centre is the centre of the shape's bounding box, the view-box centre is the centre as defined by the viewBox attribute on the nearest ancestor <svg> element.

1. When y1=y2 the gradient vector length is 0 (because for your gradients x1=x2). The SVG specifiation says this: So what's your last gradient stop? It's this: <stop offset="1%" stop-opacity="0" stop-color="red" /> 0 opacity means no drawing of anything so no Firefox bug there. 2. As for the rotation origin. The rotation box is the view-box and not the fill-box per the specification Chrome gets this wrong and uses the fill-box but Firefox does not. Given a different box size the placement of the centre of that box can be different.

The CSSOM specification says that offsetWidth etc are for HTML elements only. Firefox and IE have never supported these properties on SVG elements so Chrome is merely falling into line with the specification and with other UAs here.

Hi Carl, We've (the Firefox developers) made huge advancements in dealing with SVG origins too . Firefox 41 and 42 will support transform-origin with percentages if the svg.transform-origin.enabled is set to true. Firefox 43 will support transform-origin with percentages without requiring any pref at all.