Как перерисовать элемент DOM после увеличения? - PullRequest
Новая
       11

Как перерисовать элемент DOM после увеличения?

1 голос
/ 11 марта 2012

В настоящее время я использую zoom.js для увеличения некоторых форм SVG, которые я нарисовал в HTML.Рассмотрим следующий фрагмент: 

<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: Я попытался установить отображение элемента на «none» и сбросить обратно на «block» после увеличения - некоторые сообщения, казалось, предполагали, что это вызовет перерисовку - но элемент все еще выглядит пиксельным послеснова становится видимым: 

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

Ответы [ 2 ]

1 голос
/ 11 марта 2012

Хотя ответ на проблему перерисовки остается для меня загадкой, почему бы не использовать тот же тип метода, который они использовали для вызова? 

document.querySelector('#circle').addEventListener( 'click', function(event){
  event.preventDefault();
  zoom.in( { element: event.target } );
});
0 голосов
/ 16 марта 2012

Я закончил с Рафаэлем , чтобы нарисовать мои SVG-формы вместо простого старого HTML / XML.По причине, которая остается для меня загадкой, ошибка, которая стимулировала вопрос, не возникает с фигурами, которые он рисует.

...