This page is Not Ready

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



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