< svg‎ | properties
Jump to: navigation, search


This article is Not Ready.


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 (MSDN)


This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]