ed.blog

Yet another sandbox svg! This time we're going to list all the graphic elements that are intersected by a one-pixel rectangle positioned at the current mousepointer location.

Below is an example of a function that returns the list of elements under the broomsti^Wmousecursor by using the SVG DOM method getIntersectionList. Pass in a MouseEvent object from a mouse event handler to get a static NodeList object back.

function getInteresectedElements(evt)
{
  var rpos = svgroot.createSVGRect();
  rpos.x = evt.clientX;
  rpos.y = evt.clientY;
  rpos.width = rpos.height = 1;
  return root.getIntersectionList(rpos, null);
}

Here's an modified variant of the above running in the browser. Hovering the graphic will show the id's of the currently intersected elements. Note that to work this script requires that the SVG 1.1 DOM method getIntersectionList is implemented, which at the time of writing is not the case in Firefox or Safari. View live example.

The script that shows the intersected elements and the current mouse position can be viewed here. To use it in another svg file just download that script and add a 'script' element to the svg file you want to use it in, like this:

  ...
  <script xlink:href="showintersectedelms.js"/>
  ...

A common scenario is that you have an svg file (which often has a 'viewBox' attribute) created in a graphics editor like Inkscape, and now want to make this static svg file interactive or animated. Another scenario is that you want to place/layout elements dynamically and need to know the positions and size of some given elements.

Prerequisites

First it's important to at least be somewhat acquainted with the various coordinate systems at play inside an svg file.

The initial viewport (sometimes referred to as the client- or screen-) coordinate system

This is the actual coordinate system that you see on your computer screen, often defined in pixels. You will need to use this when handling mouseevents for example, since they are going to be in this coordinate system, and they may need to be converted into userspace.

The userspace coordinate system

This is the coordinate system at the place of any given element in the svg file. It depends on what transforms have been specified as well as what the viewport coordinate system specified by the parent svg element(s) and the 'viewBox' if any.

The fun stuff

In order to get the geometric boundingbox of an svg element you can call the getBBox DOM method. This method returns a rectangle DOM object that corresponds to the boundingbox of the element in user units. The returned DOM object is called an SVGRect, and has the following four properties that can be accessed: x, y, width and height.

Note: The boundingbox object is a snapshot of the element's boundingbox at the time the getBBox method was called. Changing the values of the boundingbox has no effect on the visual appearance of the element.

Here's a simple function that returns the boundingbox of an element as a 'rect' element. If the 'rect' element is inserted just after the element that we got a boundingbox for it would in most cases cover that element.

var svgns = "http://www.w3.org/2000/svg";
function getBBoxAsRectElement(elm)
{
  var bb = elm.getBBox();
  var rect = document.createElementNS(svgns, "rect");
  rect.x.baseVal.value = bb.x;
  rect.y.baseVal.value = bb.y;
  rect.width.baseVal.value = bb.width;
  rect.height.baseVal.value = bb.height;
  return rect;
}

Here's an example of how to show the boundingbox as a border around any element in an svg. View live example.

The script that shows the boundingbox as a red rect can be viewed here. To use it in another svg file just download that script and add a 'script' element to the svg file you want to use it in, like this:

  ...
  <script xlink:href="showbbox.js"/>
  ...

• Jeff Schiller (Motorola) has been appointed co-Chair of the SVG Interest Group. The SVG IG is chartered to produce supplementary documents for the improvement, adoption, and evangelism of SVG; and to foster the engagement of the SVG community, both members and public, in W3C activities. Congratulations Jeff!
• Opera Mini adds SVG support in their latest server upgrade. Great news for everyone that wants to efficiently use scalable web graphics anywhere.
• Robert O'Callahan (Mozilla) writes:
  

  One of the problems with the standards-based Web is that it's hard to use SVG's features to enhance HTML content. [...] So I've been experimenting with better ways to apply SVG effects to HTML content. The first step is to make SVG's 'clip-path', 'mask' and 'filter' properties work when applied to HTML content.

  I'll just let his work speak for itself.

digraph simple_state_machine {
  node [shape = doublecircle]; S1;
  node [shape = circle] S2;
  node [shape = point] S0;
  S0 -> S1;
  S1 -> S2 [ label = "0" ];
  S1 -> S1 [ label = "1" ];
  S2 -> S1 [ label = "0" ];
  S2 -> S2 [ label = "1" ];
}

• Joshua Zeidner interviews Ted Gould about SVG, Inkscape and Web Standards. Quite an interesting read.
• The W3C Video on the Web Workshop delivered its report. I suppose there are more than a few things for people to be upset about there, but there is some sensible outcome as well. I'll get back to that in another post.
• The Wikidraw project shows how SVG can be used for visualizing information from other sources in a mindmap-like fashion. Pretty cool, even though the server is a bit slow.
• Smashing Magazine highlights some of the best tutorials for learning how to make the most of Adobe Illustrator, naturally they are applicable to any vector graphics editor.
• Something I've written about before is the state of XHTML in Wordpress. I'm happy to hear I'm not alone in wanting more out of blogging software such as Wordpress, Jeff Schiller wrote a number of posts on the subject, among others Stimulating Wordpress and about his new XHTML+SVG theme. This new theme created some followup articles by Shelley Powers [XHTMLating feeds] and Sam Ruby [XHTMLating Wordpress].