Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

# cx

## Examples

The following code example demonstrates how the starting point and direction of an arc for an ellipse are affected by a user space transform.

``````

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400px" height="300px" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" version="1.1"
<desc>Arc Transform</desc>
<!-- Show the outline of the canvas by using a rect element. -->
<rect x="1" y="1" width="399" height="299" fill="none" stroke="black" stroke-width="1" />
<defs>
<ellipse id="theEllipse" x="0" y="0" rx="50" ry="100" style="fill: blue; stroke: black; stroke-width: 5px;"/>
</defs>
<!-- transform="rotate(30, 280, 150)" rotates the ellipse 30 degrees about the
point (280, 150) as opposed to the origin of the viewport. -->
<use xlink:href="#theEllipse" x="280" y="150" transform="rotate(30, 280, 150)"/>
</svg>
``````

## Notes

### Remarks

The arc of a circle element and the arc of an ellipse element begin at the 3 o’clock point on the associated radius and progress towards the 9 o’clock point. The starting point and direction of the arc are affected by the user space transform in the same manner as the geometry of the element.