0 

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>

当我尝试将平移和可缩放的 svg 旋转到 90 度时，旋转已经发生并且缩放也如预期的那样正常。但是，当我尝试平移旋转的 svg 时，它无法按预期正常工作。如果我单击并将鼠标向左拖动，则 svg 向上移动，如果我向右拖动，则向下移动。我单击旋转按钮，放置变换 g 标签并在 svg 的 svg 内部 html 周围应用。

4

0 回答 0