This page shows usage examples of SVG transform-origin attribute.
It's purpose is to demonstrate Safari's Bug #201854.
Image in Figure 1 is composed from SVG primitives without any transform appplied to them. It's a reference image.
All other images are recreating the reference image with usage of transform. All those images should look the same. They look the same in Chrome and Firefox. In Safari images in section 2 and 4 are broken. It seems like transform-origin attribute is applied only to transformations defined in transform CSS property, but not in transform SVG attribute.
For example, this is broken in Safari <use href="#target" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
while this is rendered correctly <use href="#target" fill="blue" style="-webkit-transform: scale(0.75, 0.75); transform: scale(0.75, 0.75);" transform-origin="100 100"/>
1. Reference image
Figure 1. Reference image, transform is not used. All other images should look the same.
2. transform attribute applied to <g> element
Figure 2-1. Nested <svg> has the same size as the outermost <svg>.Figure 2-2. Nested <svg> is centered in the outermost <svg> along single axis.Figure 2-3. Nested <svg> is centered in the outermost <svg> along both axes.
3. transform CSS property applied to <g> element
Figure 3-1. Nested <svg> has the same size as the outermost <svg>.Figure 3-2. Nested <svg> is centered in the outermost <svg> along single axis.Figure 3-3. Nested <svg> is centered in the outermost <svg> along both axes.
4. transform attribute applied to <svg> element
Figure 4-1. Nested <svg> has the same size as the outermost <svg>.
Figure 4-2a. Nested <svg> is centered in the outermost <svg> along single axis.
Transformed <svg> is shifted.
Figure 4-2b. Nested <svg> is centered in the outermost <svg> along single axis.
transform-origin is shifted.
Figure 4-3a. Nested <svg> is centered in the outermost <svg> along both axes.
Transformed <svg> is shifted.
Figure 4-3b. Nested <svg> is centered in the outermost <svg> along both axes.
transform-origin is shifted.
5. transform CSS property applied to <svg> element
Figure 5-1. Nested <svg> has the same size as the outermost <svg>.
Figure 5-2a. Nested <svg> is centered in the outermost <svg> along single axis.
Transformed <svg> is shifted.
Figure 5-2b. Nested <svg> is centered in the outermost <svg> along single axis.
transform-origin is shifted.
Figure 5-3a. Nested <svg> is centered in the outermost <svg> along both axes.
Transformed <svg> is shifted.
Figure 5-3b. Nested <svg> is centered in the outermost <svg> along both axes.
transform-origin is shifted.