缩放后如何重绘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。 由于对我来说仍然是个谜，导致问题的bug不会随其绘制的形状发生。