缩放后如何重绘DOM元素？答案

【问题标题】：How to redraw a DOM element after zoom?缩放后如何重绘DOM元素？
【发布时间】：2012-03-11 04:18:41
【问题描述】：

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

<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');

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

不幸的是，这不起作用！仍然那些讨厌的像素来烦我。
该死的。我不这么认为，但至少我们试了一下。我做了更多的挖掘，发现它看起来在 FireFox 和 IE7/8 中可能存在问题，Safari 应该可以正常显示。我正在检查错误报告，似乎快速修复是通过
感谢您的想法...不过，恐怕问题仍然存在。显然，Chrome 不打印嵌入的 SVG 文件！
这很粗糙。对不起，芽。我没主意了。如果我遇到其他事情，我会发布它。不过，祝你好运！

【解决方案2】：

我最终选择了Raphael 来绘制我的 SVG 形状，而不是普通的旧 HTML/XML。由于一个对我来说仍然是个谜的原因，引发问题的错误不会出现在它绘制的形状中。

【讨论】：