view

< svg‎ | elements
Jump to: navigation, search

view

This article is In Progress.



Needs Summary: This article does not have a summary. Summaries give a brief overview of the topic and are automatically included on some listing pages that link to this article.


Overview Table

DOM Interface SVGElement

Examples

The following code example shows how to zoom in and zoom out of rendered content.

<?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">
<!-- 400 pixels per 100 user units, or 4 pixels per 1 user unit. -->
<svg width="400px" height="400px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">  <!-- Required for 'xlink' usage. -->
  <title>The SVG view Element</title>
  <desc>
        The key concept is that the 'viewBox' attribute values of the
        associated 'view' element are essentially applied to the 'viewBox'
        attributes of its parent 'svg' element.
  </desc>
  <defs>
    <radialGradient id="myRadialGradient">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="50%" stop-color="white" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <view id="normalView" viewBox="0 0 100 100"/>  <!-- Same 'viewBox' values as on the 'svg' element (that is, 4 pixels per user unit). -->
  <view id="halfView"   viewBox="0 0 200 200"/>  <!-- 400 pixels per 200 user units, or 2 pixels per 1 user unit - shrinking things. -->
  <view id="doubleView" viewBox="0 0  50  50"/>  <!-- 400 pixels per 50 user units, or 8 pixels per 1 user unit - expanding things. -->
  <!-- Outline the initial viewport. -->
  <rect x="0" y="0" width="100%" height="100%" style="stroke: green; fill: none;"/>
  <!-- Fill the viewport with something interesting. -->
  <circle fill="url(#myRadialGradient)" stroke="black" stroke-width="1" cx="50" cy="50" r="40"/>
  <!-- Provide the user with a way, by clicking the links, to essentially change the 'svg' element's 'viewBox' values. -->
  <a xlink:href="#doubleView">
    <text x="2" y="6" font-size="5">[double size]</text>
  </a>
  <a xlink:href="#normalView">
    <text x="39" y="6" font-size="5">[normal size]</text>
  </a>
  <a xlink:href="#halfView">
    <text x="77" y="6" font-size="5">[half size]</text>
  </a>
</svg>

Notes

Remarks

Note: In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherent core HTML attributes, properties, events, methods, and styles.

The view element can change the viewBox attributes of its parent svg element. For example, you can use this behavior to zoom in or zoom out of rendered SVG content.

Standards information

Members

The SVGViewElement object has these events:

  • onload: Occurs when the browser has fully parsed the element and all of its descendants.

The SVGViewElement object has these properties:

  • externalResourcesRequired: Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
  • focusable: Determines if an element can acquire keyboard focus (that is, receive keyboard events) and be a target for field-to-field navigation actions (such as when a user presses the Tab key).
  • ownerSVGElement: Gets the nearest ancestor svg element.
  • preserveAspectRatio: Gets an XML value that indicates whether to force uniform graphic scaling.
  • viewBox: Gets a value that indicates how a graphic scales to fit a container element.
  • viewportElement: Gets the element that established the current viewport.
  • viewTarget: Gets the viewTarget attribute of a view element.
  • xmlbase: Gets or sets the base attribute on the element.
  • zoomAndPan: Gets the zoomAndPan attribute of an element.

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

Attribution

This article contains content originally from external sources.

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