Question

我在此网页上将SVG放大到特定区域（较浅的矩形）。我这样做的方法是更改viewBox属性，因为svg中有一个更大的元素（现在它只是红色矩形），并且我不想使用库。

因此，一切正常，但是缩放功能发生得太快，我想知道如何减慢它的速度，因为它是CSS中的过渡。现在我不必将js脚本与CSS关联起来，或者我的过渡尝试位置是否在错误的位置。

    	
    	var selected = false;
    	var svg = document.getElementById('svg');
    	var rect =document.getElementById('rect');

    	var zoomOnElement = function(e) {
    		    if (e.target === selected) 

    		    {
    			// Deselect element
    			//svg.setAttribute("viewBox","264.5 126.2 1149.9 547.4");
    			selected = false;
    		    }
    		     else  
    		     {
    			// Select element
    			selected = e.target;
    			var viewBox = selected.getAttribute('x')
    				viewBox += " " + selected.getAttribute('y')
    				viewBox += " " + (selected.getAttribute('width'))
    				viewBox += " " + (selected.getAttribute('height'))
    			svg.setAttribute("viewBox", viewBox);}
    		}

    	document.getElementById('window').addEventListener("click", zoomOnElement);

    		html {margin: 0px; padding: 0px;}
    		body {margin: 0px; padding: 0px;}

    		svg {
    			height:100vh;
    			width: 100vw;
    			margin: 0px;
    			padding: 0px;
    			position: absolute;
    			-webkit-transition: all 1s ease-in-out;
    			transition: all 1s ease-in-out;
    		}

    		div {
    			margin: 0px;
    			padding: 0px;
    			float: left;
    			position: absolute;
    		}

    		rect.mouse:hover {
    			cursor: pointer;
    		}

    		.box{
    			width: 98.7;
    			height: 70;
    		}

    	<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="264.5 126.2 1149.9 547.4" xml:space="preserve">


    <rect x="263.3" y="126.7" opacity="0.39" fill="#370B13" width="1149.8" height="547.6"/>
    <rect  id="rect" x="739.8" y="298.6" opacity="0.4" fill="#F7F7F7" width="62.9" height="70"/>
    <rect class="mouse" id="window" x="729.8" y="292.3" opacity="0.8" fill="#F7F7F7" width="157.2" height="83"/>
    <polyline fill="none" stroke="#000000" stroke-width="2" points="750.9,298.6 738.7,298.6 738.7,368.6 750.9,368.6 "/>
    <polyline fill="none" stroke="#000000" stroke-width="2" points="794.8,368.6 802.8,368.6 802.8,298.6 794.8,298.6 "/>
    </svg>

    <div id="left" class="half"></div>

Answer 1

您的CSS transition无法正常工作，因为当您单击SVG时，您没有更改任何CSS属性。过渡仅适用于CSS属性发生更改的情况。您真正需要做的就是更改CSS scale以创建缩放效果。

/* This style will be applied when the SVG is clicked */
.zoomed { transform:scale(2.0); }

<!DOCTYPE html>
<html>
<head>
	<title></title>

	<style type="text/css">
		html {margin: 0px; padding: 0px;}
		body {margin: 0px; padding: 0px;}

		svg {
			height:100vh;
			width: 100vw;
			margin: 0px;
			padding: 0px;
			position: absolute;
      transform:scale(1.0); /* Set the initial zoom */
			transition: transform 1s ease-in-out;
		}
      
		div {
			margin: 0px;
			padding: 0px;
			float: left;
			position: absolute;
		}

		rect.mouse:hover {
			cursor: pointer;
		}

		.box{
			width: 98.7;
			height: 70;
		}
	</style>
</head>
<body>

	<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="264.5 126.2 1149.9 547.4" xml:space="preserve">
   <rect x="263.3" y="126.7" opacity="0.39" fill="#370B13" width="1149.8" height="547.6"/>
   <rect  id="rect" x="739.8" y="298.6" opacity="0.4" fill="#F7F7F7" width="62.9" height="70"/>
   <rect class="mouse" id="window" x="729.8" y="292.3" opacity="0.8" fill="#F7F7F7" width="157.2" height="83"/>
   <polyline fill="none" stroke="#000000" stroke-width="2" points="750.9,298.6 738.7,298.6 738.7,368.6 750.9,368.6 "/>
   <polyline fill="none" stroke="#000000" stroke-width="2" points="794.8,368.6 802.8,368.6 802.8,298.6 794.8,298.6 "/>
</svg>

<div id="left" class="half"></div>
<script type="text/javascript">
  var svg = document.getElementById('svg');
  svg.addEventListener("click", function(){
    // Dynamically add the .zoomed CSS class, triggering the transition
    this.classList.add("zoomed");
  });
</script>
</body>
</html>

尝试缓解JavaScript上的点击事件

1 个答案: