This page is Not Ready

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.



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"
<svg width="400px" height="300px" viewBox="0 0 400 300" xmlns="" 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" />
    <ellipse id="theEllipse" x="0" y="0" rx="50" ry="100" style="fill: blue; stroke: black; stroke-width: 5px;"/>
  <use xlink:href="#theEllipse" x="90" y="150"/>
  <!-- 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)"/>



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.


Standards information

See also

Related pages