Панорамирование не работает должным образом после поворота SVG на 90 градусов - PullRequest
Новая
       55

Панорамирование не работает должным образом после поворота SVG на 90 градусов

0 голосов
/ 24 октября 2019 

var mySVG = SVG('drawing').size(500, 300).attr('id','svg-container').addClass('svg-container');

var panZoomInstance = svgPanZoom('#svg-container', {
	panEnabled: true,
	controlIconsEnabled: false,
	zoomEnabled: true,
	dblClickZoomEnabled: true,
	mouseWheelZoomEnabled: true,
	preventMouseEventsDefault: true,
	zoomScaleSensitivity: 0.2,
	minZoom: 0.5,
	maxZoom: 3,
	fit: false,
	contain: false,
	center: false,
	refreshRate: 'auto',
	
	eventsListenerElement: null	
});
 
(document.getElementById('reset')).addEventListener("click", function(event) {
	panZoomInstance.reset();
});
	(document.getElementById('corner')).addEventListener("click", function(event) {
	var currentZoom = panZoomInstance.getZoom();
	panZoomInstance.pan({x: -50*currentZoom, y: -120*currentZoom});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.6/svg.js"></script>

<!DOCTYPE html>
<html>
<body>

<svg width="100%" height="100%" id="drawing">
   
	   <rect     width="30" height="10" fill="green"/>      

</svg>
	<script>
		
	</script>

</body>
</html>

var mySVG = SVG('drawing').size(500, 300).attr('id', 'svg-container').addClass('svg-container');

var panZoomInstance = svgPanZoom('#svg-container', {
  panEnabled: true,
  controlIconsEnabled: false,
  zoomEnabled: true,
  dblClickZoomEnabled: true,
  mouseWheelZoomEnabled: true,
  preventMouseEventsDefault: true,
  zoomScaleSensitivity: 0.2,
  minZoom: 0.5,
  maxZoom: 3,
  fit: false,
  contain: false,
  center: false,
  refreshRate: 'auto',

  eventsListenerElement: null
});

(document.getElementById('reset')).addEventListener("click", function(event) {
  panZoomInstance.reset();
});
(document.getElementById('corner')).addEventListener("click", function(event) {
  var currentZoom = panZoomInstance.getZoom();
  panZoomInstance.pan({
    x: -50 * currentZoom,
    y: -120 * currentZoom
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.3.6/svg.js"></script>
<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>

<!DOCTYPE html>
<html>

<body>

  <svg width="100%" height="100%" id="drawing">
	   <rect width="80" height="40" fill="green"/>      
</svg>

</body>

</html>

Когда я пытаюсь повернуть панорамирование и масштабирование изображения до 90 градусов, вращение произошло, и масштаб также проснулся, как и ожидалось. Но когда я пытаюсь прокрутить повернутый SVG, он не работает должным образом. Если я щелкаю и перетаскиваю мышь влево, svg движется вверх, а если я перетаскиваю вправо, он движется внизЯ нажимаю кнопку поворота, помещаю тег g преобразования и применяю вокруг svg внутренний html svg.

...