SVG> Animierte Breite von Mitte

Question

Ich habe ein Logo in SVG, das ich animieren möchte. Es gibt einen mittleren Teil, der fixiert bleibt, aber die Seitenstriche werden sich tatsächlich ausdehnen und das ganze Ding umgehen. Es gibt und exemple von dem, was ich will eigentlich tun:

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

Im Moment die Animation Art von Arbeit, aber ich konnte nicht meine Aufgabe macht aus ihrem korrekten Zentrum erweitert. Zum Beispiel sollte sich die untere Linie von ihrer Mitte aus erweitern, die Seitenlinien sollten sich von der Unterseite usw. ausdehnen.

Brauchen Sie Hilfe darüber. Kann jemand bitte eine Hand leihen?

Answer 1

Angenommen, Sie sind nicht daran interessiert, Rechtecke zu verwenden, um die Seiten Ihrer Form zu formen, wird es zu einem viel einfacheren Problem, wenn Sie Ihre Form so ändern, dass ein einzelner Pfad mit einer Strichbreite verwendet wird, die Ihrer Rechteckdicke entspricht.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t <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" /> 
 
\t </g> 
 
</svg>

Anschließend können Sie Ihre Animation implementieren, indem das Strichmuster der Linie Animieren. Stellen Sie sich vor, Ihre Pfadlänge ist 100. Wir möchten mit einem Strich von 0 beginnen und dann mit einem Strich von 100 enden. Gleichzeitig animieren wir den Strichversatz (wo das Strichmuster beginnt) von -50 (verschiebt das Strichmuster) zur Mitte der Linie) bis 0 (der Anfang der Linie).

Für unsere Linie ist die Weglänge tatsächlich 304,4. So ist die letzte Animation wird:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t <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" /> 
 
\t \t <animate xlink:href="#shape" attributeName="stroke-dasharray" from="0 304.4" to="304.4 0" begin="0s" dur="0.4s" /> 
 
\t \t <animate xlink:href="#shape" attributeName="stroke-dashoffset" from="-152.2" to="0" begin="0s" dur="0.4s" /> 
 
\t </g> 
 
</svg>

Abgesehen: wir auch allein nur durch Animieren das Strichmuster die gleiche Wirkung erzielen könnte, aber wie das funktioniert, dauert länger zu erklären :)

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t <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" /> 
 
\t <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" /> 
 
\t </g> 
 
</svg>