如何在缩放后重绘DOM元素？

Question

我目前正在使用zoom.js放大我在HTML中绘制的一些SVG形状。请考虑以下代码段：

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

使用事件处理程序：

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

放大后，SVG形状的边框看起来非常像素化，看起来在缩放后没有重新绘制SVG形状。所有DOM元素（例如，填充颜色的DIV或文本元素）似乎都会出现相同的行为。但是，当我查看上面链接的网站时，文本元素似乎在缩放发生后重新绘制。我无法理解为什么在我的情况下没有重新绘制它。

编辑：我也尝试将SVG元素放在一个单独的文件中并包含它，如下：

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

使用此方法会出现同样的问题。

编辑2：我试图将元素的显示设置为“无”并在放大后重置为“阻止” - 一些帖子似乎暗示这会强制重绘 - 但元素在再次变为可见后仍然会出现像素化：

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

Answer 1

虽然重绘问题的答案对我来说仍然是一个谜，但为什么不使用他们用来调用的相同类型的方法呢？

document.querySelector('#circle').addEventListener( 'click', function(event){
  event.preventDefault();
  zoom.in( { element: event.target } );
});

Answer 2

我最终使用Raphael来绘制我的SVG形状而不是普通的旧HTML / XML。出于一个对我来说仍然是个谜的原因，刺激问题的错误不会随着它所绘制的形状而出现。