Question

I have a (2D) computational geometry library I’m working on, and I’d like to be able to spit out pictures to help debug. The primitives I want are points, line segments, and text. But I don’t know before hand what scale I’ll be interested in looking at (maybe only a small part of the polygon isn’t working right), so I need to be able to zoom and pan around the image as well.

I hooked up SVGPan to pan and zoom in my generated images when I view them in Chrome, but (understandably) all the primitives are scaling with the zoom, since SVGPan works just by using a scaling transform. So zooming in doesn’t help figure out what’s going on in very small feature regions.

I found the vector-effect property, which fixes the line segments quite nicely by letting me specify a width in pixels. But it doesn’t help me manage the text. Ideally it’d be 12 pt no matter how large the transform scale is.

And I’m also still at a loss about drawing points. I thought I could use circles, but the radius also scales, so if you zoom in too far it just looks like a bunch of circles instead of points. If I use the vector-effect property, the stroke width of the circle won’t scale anymore, but the radius of the circle still does. So I end up with large circles with thin outlines, instead of a small circle a pixel or two in radius.

Is there a way to only scale positions for elements, maybe? I really always want the lines, points, and text to appear the same size regardless of scale, and only have their positions scale. My SVG files are all machine generated and strictly to help me coding, so I don’t mind odd hacks, if anyone has any ideas. Or if there’s another technology instead of SVG that would make more sense for this use case.

Answer 1

I’ve answered this question more in-depth in these questions:

• How to draw non-scalable circle in SVG with Javascript
• Preserve descendant elements' size while scaling the parent element

In short, you want to (a) use transform="translate(…,…) to position the unscaling elements and (b) each time you adjust the transform on some wrapper (like SVGPan does) pass each element you want to not scale to this function:

// Copyright 2012 © Gavin Kistner, !@phrogz.net
// License: http://phrogz.net/JS/_ReuseLicense.txt

// Counteracts all transforms applied above an element.
// Apply a translation to the element to have it remain at a local position
function unscale(el){
  var svg = el.ownerSVGElement;
  var xf = el.scaleIndependentXForm;
  if (!xf){
    // Keep a single transform matrix in the stack for fighting transformations
    xf = el.scaleIndependentXForm = svg.createSVGTransform();
    // Be sure to apply this transform after existing transforms (translate)
    el.transform.baseVal.appendItem(xf);
  }
  var m = svg.getTransformToElement(el.parentNode);
  m.e = m.f = 0; // Ignore (preserve) any translations done up to this point
  xf.setMatrix(m);
}

The answer to the first question above also describes a helper method designed to work directly with SVGPan so all you have to do is include my library (two functions), add a noscale class to each marker and then write something like:

unscaleEach('#viewport .noscale');