3

У меня есть SVG с Inkscape. В этом наборе SVG с viewBox я хочу анимировать каждый элемент внутри SVG.
У меня нет проблем с translate или opacity,но когда мне нужно повернуть или масштабировать отдельный элемент, он ведет себя странно.
Я пытаюсь правильно понять концепцию viewBox, но мне необходима помощь.

Я понимаю, что у меня есть только одна origin point, когда у меня есть только один viewBox., Мне нужно применить несколько окон просмотра для реализации трансформации нескольких фигур SVG?

<?xml version="1.0" encoding="UTF-8"?>
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
 
  
  <ellipse id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
  
  <rect id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00;paint-order:normal"/>
 
  <path id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;paint-order:normal"/>
 
</svg>

1

1 ответ 1

4

В SVG координаты любой фигуры всегда имеют абсолютное значение, которое рассчитывается от верхнего левого угла холста SVG.
Поэтому при применении команды scale(2) координаты центра фигуры увеличиваются тоже в два раза и фигура сместится влево и вниз.

<svg id="SVGRoot" version="1.1"  width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" style="border:1px solid grey;">
     <rect  id="rect9240" transform="scale(2)" x="100" y="100" width="100" height="100"   style="fill-rule:evenodd;fill:#f00;> stroke:#000; paint-order:normal">
 
	<animateTransform
    	xlink:href="#rect9240"
		attributeName="transform"
		type="scale"
		values="1;2;2;1;1"
		dur="8s"
		fill="freeze"
		repeatcount="indefinite"
		/>
 </rect>		
      <circle cx="150" cy="150" r="3" fill="black" />
		<circle cx="300" cy="300" r="3" fill="dodgerblue" />
	 <text x="150" y="140" font-size="16px" text-anchor="middle" > Center (150,150)	</text>
	  <text x="300" y="290" font-size="16px" text-anchor="middle" > Center (300,300)	</text>
</svg>

Для возвращения увеличенной фигуры на исходное положение необходимо применить команду translate(X, Y)

Здесь есть прекрасный пост @Paul LeBeau где подробно объяснено это.

CSS решение

Чтобы не рассчитывать положение центра фигуры, можно воспользоваться правилом CSS transform-box: fill-box;

При выбранном значении атрибута fill-box

The object bounding box is used as the reference box.

Другими словами, - ограничительная рамка вокруг объекта используется как контейнер, внутри которого будут происходить трансформации. И чтобы найти центр контейнера и тем самым точку вращения, устанавливаем - transform-origin:50% 50%;

  • Ниже пример увеличения и уменьшения фигур SVG

svg {
width:50%;
}
.ellipse1, .rect1, .path1 {
transform-box: fill-box;
    animation: scale 3s linear infinite alternate;
	animation-direction: alternate;
transform-origin:50% 50%;
}


@keyframes scale {
    0% { transform: scale(0.5); }
    100% {  transform: scale(1); }
}
<svg id="SVGRoot"  version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
   <ellipse class="ellipse1" id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
  
  <rect class="rect1" id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00; stroke:#000; paint-order:normal"/>
  
  <path  class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
 </svg>

  • Пример вращения

svg {
width:50%;
}
.ellipse1, .rect1, .path1 {
transform-box: fill-box;
    animation: spin 4s linear infinite alternate;
transform-origin:50% 50%;
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% {  transform: rotate(359deg); }
}
  <path  class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
 
</svg>
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">

  <ellipse class="ellipse1" id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>

  <rect class="rect1" id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00; stroke:#000; paint-order:normal"/>

  <path  class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
 
</svg>

  • Увеличение и вращение

svg {
width:50%;
}
.ellipse1, .rect1, .path1 {
transform-box: fill-box;
    animation: scale1 4s linear, spin 4s linear 4s infinite alternate;
	transform-origin:50% 50%;
}


@keyframes spin {
    0% { transform: rotate(0deg);	}
    100% { transform: rotate(360deg); }
}

@keyframes scale1 {
    0% { transform: scale(0.5);}
    100% {  transform: scale(1);}
}
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
   
  <ellipse class="ellipse1" id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
  
  <rect class="rect1" id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00; stroke:#000; paint-order:normal"/>
 
  <path  class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
 
</svg>
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
   
  <ellipse class="ellipse1" id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
  
  <rect class="rect1" id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00; stroke:#000; paint-order:normal"/>
 
  <path  class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
 
</svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.