масштабирование SVG элементов

477

30 января 2017, 19:50

Добрый день уважаемые. Подскажите пожалуйста, как прописать формулу(или указать параметры), для правильного масштабирования элементов SVG. Приведу пример

	window.onload = function(){ 
 
		var $allFigures = $('#figures'), 
		$figure = $('.figure'), 
		$circle = $('circle'), 
		$rect = $('rect'), 
		$polygon = $('polygon'), 
		attrBox = $allFigures.attr('viewBox'), 
		initialWidth, 
		initialHeight, 
		initialX, 
		initialY; 
 
		console.log($figure.length + " = $figure count") 
 
		$circle.click(function(){ 
			var R = $(this).attr("r"); 
			$(this).attr({"r": R * 2}); 
		}) 
 
		$rect.click(function(){ 
			initialX = $(this).attr("x"); 
			initialY = $(this).attr("y"); 
			initialWidth = $(this).attr("width"); 
			initialHeight = $(this).attr("height"); 
 
			$(this).attr({"x": initialX / 2, 
				"y": initialY / 2, 
				"width": initialWidth *2,  
				"height": initialHeight *2}); 
		}) 
 
 
		$figure.on("click", $figure, function(){ 
			$(this).css({"fill": "#0f0"}); 
		}) 
 
	}

/*.figure:hover{ 
			transform: scale(1.2); 
}*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
	<svg version="1.1" id="figures" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
	viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;" xml:space="preserve"> 
	<rect  x="386" y="138.5" class="figure" fill="#A21E22" stroke="#000"  stroke-miterlimit="10" width="185" height="123"/> 
	<circle  class="figure" fill="#4CA146" stroke="#000"  stroke-miterlimit="10" cx="118" cy="200" r="48"/> 
	<polygon  class="figure" fill="#FEE33A" stroke="#000"  stroke-miterlimit="10" points="287,123.2 304.3,176.3 360.1,176.3 314.9,209.1 332.2,262.2 287,229.3 241.8,262.2  
	259.1,209.1 213.9,176.3 269.7,176.3 "/> 
</svg>

Подскажите, пожалуйста как произвести постепенное масштабирование полигонального объекта SVG? Из-за того что в svg есть область видимости viewBox, я так понимаю что единственный способ здесь пересчитывать точки нахождения points для объекта? Или есть ещё какой метод равномерного масштабирования объекта ?

Answer 1

Метод есть и не нужно самому пересчитывать координаты фигур. Это за вас сделает интерпретатор SVG. Смотрите, к вашему файлу я добавлю только одну строчку анимации viewBox. И будет плавное увеличение и уменьшение размера фигур.

<svg version="1.1" id="figures" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
	viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;" xml:space="preserve"> 
	<rect  x="386" y="138.5" class="figure" fill="#A21E22" stroke="#000"  stroke-miterlimit="10" width="185" height="123"/> 
	<circle  class="figure" fill="#4CA146" stroke="#000"  stroke-miterlimit="10" cx="118" cy="200" r="48"/> 
	<polygon  class="figure" fill="#FEE33A" stroke="#000"  stroke-miterlimit="10" points="287,123.2 304.3,176.3 360.1,176.3 314.9,209.1 332.2,262.2 287,229.3 241.8,262.2  
	259.1,209.1 213.9,176.3 269.7,176.3 "/> 
   <animate  attributeName = "viewBox" begin = "0s" dur = "10s" values = "0 0 600 400;-300 -200 1200 800;0 0 600 400"  
  fill = "freeze" repeatCount="indefinite" />  
	</svg>

Увеличение 3 и 4-го атрибута viewBox уменьшает масштаб, а изменение первых двух атрибутов viewBox удерживают фигуру на месте. подробнее здесь

Хотите начать анимацию по клику? добавляем begin = "svg2.click", где svg2 идентификатор всего полотна.

<svg id="svg2"  version="1.1" id="figures" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
	viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;" xml:space="preserve"> 
	<rect  x="386" y="138.5" class="figure" fill="#A21E22" stroke="#000"  stroke-miterlimit="10" width="185" height="123"/> 
	<circle  class="figure" fill="#4CA146" stroke="#000"  stroke-miterlimit="10" cx="118" cy="200" r="48"/> 
	<polygon  class="figure" fill="#FEE33A" stroke="#000"  stroke-miterlimit="10" points="287,123.2 304.3,176.3 360.1,176.3 314.9,209.1 332.2,262.2 287,229.3 241.8,262.2  
	259.1,209.1 213.9,176.3 269.7,176.3 "/> 
   <animate  attributeName = "viewBox" begin = "svg2.click" dur = "10s" values = "0 0 600 400;-300 -200 1200 800;0 0 600 400"  
  fill = "freeze" repeatCount="indefinite" />  
	</svg>

Окружность можно масштабировать увеличением, уменьшением радиуса, не трогая cx и cy

<svg version="1.1" id="figures" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
	width="600" height="400" viewBox="0 0 600 400" style="border:1px solid red;" > 
		<circle  class="figure" fill="#4CA146" stroke="#000"   cx="118" cy="200" r="48"> 
		 <animate  attributeName = "r" begin = "0" dur = "10s" values = "48;5;48"  
  fill = "freeze" repeatCount="indefinite" />  
		</circle> 	 
</svg>