This page is In Progress

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

view

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.

Attributions