SVG - анимация из средней точки на всю ширину

451

13 февраля 2017, 15:48

У меня есть логотип в SVG, который я хочу анимировать. У него есть средняя часть, которая останется фиксированной, но боковые стороны логотипа должны фактически обойти весь логотип. Есть и пример, чего я хочу на самом деле:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
	<style type="text/css"> 
		.st0{fill:#656E76;} 
	</style> 
	<g> 
		<rect id="rect1" class="st0" cx="50" cy="50" x="0" y="40.5" width="158.9" height="6.3"/> 
		<rect id="rect2" class="st0" cx="0" cy="100" x="0" y="6.4" width="6.3" height="34.4"/> 
		<rect id="rect3" class="st0" cx="0" cy="100" x="152.6" y="6.4" width="6.3" height="34.4"/> 
		<rect id="rect4" class="st0" cx="0" cy="0" x="0" y="0.2" width="38.8" height="6.3"/> 
		<rect id="rect5" class="st0" cx="100" cy="0" x="120.2" y="0.2" width="38.8" height="6.3"/> 
		 
		<animate xlink:href="#rect1" attributeName="width" from="0" to="158.9" begin="0s" dur="0.4s" /> 
		<animate xlink:href="#rect2" attributeName="height" from="0" to="34.4"  begin="0.4s" dur="0.25s" /> 
		<animate xlink:href="#rect3" attributeName="height" from="0" to="34.4" begin="0.4s" dur="0.25s" /> 
		<animate xlink:href="#rect4" attributeName="width" from="0" to="38.5" begin="0.65s" dur="0.25s" /> 
		<animate xlink:href="#rect5" attributeName="width" from="0" to="38.5" begin="0.65s" dur="0.25s" /> 
	</g> 
</svg>

На данный момент, анимация работает, но я не смог заставить расширяться стороны от их правильного центра. На примере нижняя линия должна расширяться от ее середины, боковые линии должны расширяться от дна вверх и т. д.
Нужна помощь в этом вопросе. Может кто-то, пожалуйста, протянуть руку?
Ассоциация SOEN @Dynomite

Answer 1

Если вы не повенчаны с использованием прямоугольников по бокам формы, тогда становится намного проще решить проблему. Начертите вашу фигуру с использованием одного пути (path), с шириной строки равной толщине прямоугольника.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
	<g> 
        <path id="shape" fill="none" stroke-width="6.3" stroke="#656E76" 
              d="M 38.8 3.35 H 3.15 V 43.65 H 155.75 V 3.35 H 120.2" /> 
	</g> 
</svg>

Затем вы можете реализовать свои анимации, с помощью анимации пунктира линии. Представьте, что длина вашего пути 100. Мы хотим начать с нулевой длины тире и закончить с тире длиной 100. В то же время, мы анимируем смещение штриха (где черточки рисунка начинается) от -50 (сдвиг тире к центру линии) до 0 (начало линии). Для нашей линии, длина пути фактически равна: 304.4. Поэтому анимация рисования линии остановится на финальной длине пути.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
	<g> 
        <path id="shape" fill="none" stroke-width="6.3" stroke="#656E76" 
              d="M 38.8 3.35 H 3.15 V 43.65 H 155.75 V 3.35 H 120.2" /> 
		<animate xlink:href="#shape" attributeName="stroke-dasharray" from="0 304.4" to="304.4 0" begin="0s" dur="0.4s" /> 
		<animate xlink:href="#shape" attributeName="stroke-dashoffset" from="-152.2" to="0" begin="0s" dur="0.4s" /> 
	</g> 
</svg>

Отдельно: мы также могли бы добиться того же эффекта,- просто применением анимации 4-х атрибутов stroke-dasharray, но как это работает дольше объяснять :)

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
	<g> 
        <path id="shape" fill="none" stroke-width="6.3" stroke="#656E76" 
              d="M 38.8 3.35 H 3.15 V 43.65 H 155.75 V 3.35 H 120.2" /> 
	<animate xlink:href="#shape" attributeName="stroke-dasharray" from="0 152.2 0 152.2" to="0 0 304.4 0" begin="0s" dur="0.4s" /> 
	</g> 
</svg>