How to redraw a DOM element after zoom?

Question

I am currently using zoom.js to zoom-in on some SVG shapes that I have drawn in HTML. Consider the following snippet:

<div id="circle">
  <svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" fill="red" />
  </svg>
</div>

With the event handler:

$('#circle').bind('click', function(event) {
   zoom.in({ 
    element: document.querySelector( '#circle' ) 
   });
   event.stopPropagation();
});

After zooming in, the SVG shape's borders appears quite pixelated, and it looks like the SVG shape is not being re-drawn after the zoom. The same behaviour seems to occur with all DOM elements (e.g. a DIV filled with a color, or a text element). However, when I look at the website linked above, the text elements seem to get redrawn after zooming has occurred. I'm having trouble understanding why it is not redrawn in my case.

Edit: I have also tried putting the SVG element in a separate file and including it, as such:

<embed src="circle.svg" type="image/svg+xml">

The same problem occurs using this method.

Edit 2: I have tried to set the element's display to "none" and resetting back to "block" after zooming in - some posts seemed to suggest this would force a redraw - but the element still appears pixelated after becoming visible again:

$('#circle').css('display', 'none').css('display', 'block');

Answer 1

I ended up going with Raphael to draw my SVG shapes instead of plain old HTML/XML. For a reason that remains a mystery to me, the bug that spurred the question does not occur with the shapes it draws.