SVG Diagram Animation HTML

vikavenable
November 15, 2024
188 views
0 votes
2 Answers

I wanted to animate a svg graphic. I wanted to animate the bar diagram so the bars start at 0 and reach their height at 4seconds, I can’t seem to figure it out. Imagine it like a loading bar but horizontal in the diagram. ill put the whole code from the graphic in here and maybe you could help me figure it out.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1350.8 841"><metadata><c2pa:manifest xmlns:c2pa="http://c2pa.org/manifest">AAA0RGp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAADQeanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46dXVpZDo3MGRmNTZkZS0zNWFhLTQ3ZjMtOTk3Yi03ZGJjM2ExNzA1NjgAAAABtGp1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAANdqdW1iAAAAJmp1bWRjYm9yABEAEIAAAKoAOJtxA2MycGEuYWN0aW9ucwAAAACpY2JvcqFnYWN0aW9uc4GjZmFjdGlvbmtjMnBhLmVkaXRlZG1zb2Z0d2FyZUFnZW50bUFkb2JlIEZpcmVmbHlxZGlnaXRhbFNvdXJjZVR5cGV4U2h0dHA6Ly9jdi5pcHRjLm9yZy9uZXdzY29kZXMvZGlnaXRhbHNvdXJjZXR5cGUvY29tcG9zaXRlV2l0aFRyYWluZWRBbGdvcml0aG1pY01lZGlhAAAArGp1bWIAAAAoanVtZGNib3IAEQAQgAAAqgA4m3EDYzJwYS5oYXNoLmRhdGEAAAAAfGNib3KlamV4Y2x1c2lvbnOBomVzdGFydBi1Zmxlbmd0aBlFsGRuYW1lbmp1bWJmIG1hbmlmZXN0Y2FsZ2ZzaGEyNTZkaGFzaFggsjBVEM+Icahtv3Inaao+fC7rjndEmtcSmYCA3hx9LhZjcGFkSQAAAAAAAAAAAAAAAgtqdW1iAAAAJGp1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0AAAAB32Nib3KoaGRjOnRpdGxlb0dlbmVyYXRlZCBJbWFnZWlkYzpmb3JtYXRtaW1hZ2Uvc3ZnK3htbGppbnN0YW5jZUlEeCx4bXA6aWlkOjJkMWExMGI5LWM1ZjUtNGVlOS05MDg5LTRlNDYwYTAzYTEwOW9jbGFpbV9nZW5lcmF0b3J4NkFkb2JlX0lsbHVzdHJhdG9yLzI4LjcgYWRvYmVfYzJwYS8wLjcuNiBjMnBhLXJzLzAuMjUuMnRjbGFpbV9nZW5lcmF0b3JfaW5mb4G/ZG5hbWVxQWRvYmUgSWxsdXN0cmF0b3JndmVyc2lvbmQyOC43/2lzaWduYXR1cmV4GXNlbGYjanVtYmY9YzJwYS5zaWduYXR1cmVqYXNzZXJ0aW9uc4KiY3VybHgn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LEVs3L1knWGtfg9s+HpAi98WGGvOUQFjcGFkWQ/6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPZZAQBJKvFzWk3mVn5ui4GNA54wXjdWuTnXvazfXyfdrlbwAkIpHebQSxI9/SGfUFUJxvZh4Bns9XByuQAiPPFr3oICPpe6ZDALX66cGHIRMKTXmC7DEKWZeIxMbbR6vJfRbPAToq35idRGYr2WHfbsGzxzFxvstVL6Cj56AwdbUw2mM9FQ6OdNQbpUWJBKOYrqCGO/E7bDFSQQYE7mPy8P3cXdlEIDa7mhlA9pE8KJdQlOcTjpU5z638bVVOJPgm1zxlGG5v3FHRaPGGDXHWarY/gDLzBmVcLUbLw04O138HRv+qwC3QOmRx0JDU9xcUWejRaxk6V260ebMi0k+AAzjudt</c2pa:manifest></metadata>
  <defs>
    <style>
      .cls-1 {
        fill: #3c3c3c;
      }

      .cls-2 {
        fill: #cacbce;
      }

      .cls-3 {
        fill: #9b999b;
      }
    </style>
  </defs>
  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
  <g>
    <g id="diagramm">
      <g id="Diagramm">
        <g>
          <path class="cls-1" d="M157.1,530.5c-2,0-4-.9-5.4-2.6-2.4-3-1.9-7.3,1-9.7l197.4-159.3,46.6,58.8,201.8-165c3-2.4,7.3-2,9.7,1s2,7.3-1,9.7l-212.7,173.9-46.7-58.9-186.5,150.6c-1.3,1-2.8,1.5-4.3,1.5h0Z"/>
          <path class="cls-1" d="M603,336.2c-3.8,0-6.9-3.1-6.9-6.9v-66.7h-65.8c-3.8,0-6.9-3.1-6.9-6.9s3.1-6.9,6.9-6.9h79.7v80.6c0,3.8-3.1,6.9-6.9,6.9h0Z"/>
        </g>
        <g id="Diagramm_3">
          <g id="_x31_">
            <rect class="cls-3" x="194.9" y="535.2" width="75.1" height="115.3"/>
            <animateTransform  
        attributeType="xml"
        attributeName="transform" 
        type="scale"
        values="0; 1;"
        begin="0.4s" 
        dur="4s" 
        repeatCount="1" />
          </g>
          <g id="_x32_">
            <rect class="cls-2" x="298.6" y="451.3" width="75.1" height="198.8"/>
            <animateTransform  
        attributeType="xml"
        attributeName="transform" 
        type="scale"
        values="0; 1;"
        begin="0.4s" 
        dur="4s" 
        repeatCount="1" />
          </g>
          <g id="_x33_">
            <rect class="cls-3" x="402.2" y="464.5" width="75.1" height="185.6"/>
            <animateTransform  
        attributeType="xml"
        attributeName="transform" 
        type="scale"
        values="0; 1;"
        begin="0.4s" 
        dur="4s" 
        repeatCount="1" />
          </g>
          <g id="_x34_">
            <rect class="cls-2" x="505.9" y="384.4" width="75.1" height="265.7"/>
            <animateTransform  
        attributeType="xml"
        attributeName="transform" 
        type="scale"
        values="0; 1;"
        begin="0.4s" 
        dur="4s" 
        repeatCount="1" />
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

Right now it starts from the left top corner and flies in weirdly. idk if its possible to just shrink and stretch either of the bars. i hope you understand what i am trying to do.

Answers

You just need to change the rect origin by adjusting the x, y values and replacing them by a translation on the parent. Then the animation will start from a different place.

I’ve also changed the animateTransform so that it acts on the rect rather than the g element so that it doesn’t overwrite the transforms I’ve added there. I could have used additive="sum" on the animateTransform instead of doing that.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1350.8 841">
  <defs>
    <style>
      .cls-1 {
        fill: #3c3c3c;
      }

      .cls-2 {
        fill: #cacbce;
      }

      .cls-3 {
        fill: #9b999b;
      }
    </style>
  </defs>
  <!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142)  -->
  <g>
    <g id="diagramm">
      <g id="Diagramm">
        <g>
          <path class="cls-1" d="M157.1,530.5c-2,0-4-.9-5.4-2.6-2.4-3-1.9-7.3,1-9.7l197.4-159.3,46.6,58.8,201.8-165c3-2.4,7.3-2,9.7,1s2,7.3-1,9.7l-212.7,173.9-46.7-58.9-186.5,150.6c-1.3,1-2.8,1.5-4.3,1.5h0Z"/>
          <path class="cls-1" d="M603,336.2c-3.8,0-6.9-3.1-6.9-6.9v-66.7h-65.8c-3.8,0-6.9-3.1-6.9-6.9s3.1-6.9,6.9-6.9h79.7v80.6c0,3.8-3.1,6.9-6.9,6.9h0Z"/>
        </g>
        <g id="Diagramm_3">
          <g id="_x31_" transform="translate(194.9, 535.2) translate(37.55, 115.3)">
            <rect class="cls-3" x="-37.55" y="-115.3" width="75.1" height="115.3">
            <animateTransform  
        attributeType="xml"
        attributeName="transform" 
        type="scale"
        values="0; 1;"
        begin="0.4s" 
        dur="4s"
        repeatCount="1" />
          </rect>
          </g>
          <g id="_x32_" transform="translate(298.6, 451.3) translate(37.55, 198.8)">
            <rect class="cls-2" x="-37.55" y="-198.8" width="75.1" height="198.8">
            <animateTransform  
        attributeType="xml"
        attributeName="transform" 
        type="scale"
        values="0; 1;"
        begin="0.4s" 
        dur="4s" 
        additive="sum"
        repeatCount="1">
        </rect>
          </g>
          <g id="_x33_" transform="translate(402.2, 464.5) translate(37.55, 185.6)">
            <rect class="cls-3" x="-37.55" y="-185.6" width="75.1" height="185.6">
            <animateTransform  
        attributeType="xml"
        attributeName="transform" 
        type="scale"
        values="0; 1;"
        begin="0.4s" 
        dur="4s"
        repeatCount="1" />
        </rect>
          </g>
          <g id="_x34_" transform="translate(505.9, 384.4) translate(37.55, 265.5)">
            <rect class="cls-2" x="-37.55" y="-265.7" width="75.1" height="265.7">
            <animateTransform  
        attributeType="xml"
        attributeName="transform" 
        type="scale"
        values="0; 1;"
        begin="0.4s" 
        dur="4s"
        repeatCount="1" />
        </rect>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

Also, you can use sequential growth animation instead of scaling.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1350.8 841">
  <defs>
    <style>
      .cls-1 {
        fill: #3c3c3c;
      }
      .cls-2 {
        fill: #cacbce;
      } 
      .cls-3 {
        fill: #9b999b;
      }
    </style>
  </defs>
  <g>
    <g id="diagramm">
      <g id="Diagramm">
        <g>
          <path class="cls-1" d="M157.1,530.5c-2,0-4-.9-5.4-2.6-2.4-3-1.9-7.3,1-9.7l197.4-159.3,46.6,58.8,201.8-165c3-2.4,7.3-2,9.7,1s2,7.3-1,9.7l-212.7,173.9-46.7-58.9-186.5,150.6c-1.3,1-2.8,1.5-4.3,1.5h0Z">
            <animate attributeType="XML" attributeName="opacity" from="0" to="1" begin="0s" dur="1s" fill="freeze"/>
          </path>
          <path class="cls-1" d="M603,336.2c-3.8,0-6.9-3.1-6.9-6.9v-66.7h-65.8c-3.8,0-6.9-3.1-6.9-6.9s3.1-6.9,6.9-6.9h79.7v80.6c0,3.8-3.1,6.9-6.9,6.9h0Z">
            <animate attributeType="XML" attributeName="opacity" from="0" to="1" begin="0s" dur="1s" fill="freeze"/>
          </path>
        </g>
        <g id="Diagramm_3">
          <g id="_x31_" transform="translate(194.9, 535.2)">
            <rect class="cls-3" x="-37.55" y="115.3" width="75.1" height="0">
              <animate attributeType="xml" attributeName="height" from="0" to="115.3" begin="1s" dur="2s" fill="freeze" />
              <animate attributeType="xml" attributeName="y" from="115.3" to="0" begin="1s" dur="2s" fill="freeze" />
            </rect>
          </g>

          <g id="_x32_" transform="translate(298.6, 451.3)">
            <rect class="cls-2" x="-37.55" y="198.8" width="75.1" height="0">
              <animate attributeType="xml" attributeName="height" from="0" to="198.8" begin="3.6s" dur="2s" fill="freeze" />
              <animate attributeType="xml" attributeName="y" from="198.8" to="0" begin="3.6s" dur="2s" fill="freeze" />
            </rect>
          </g>

          <g id="_x33_" transform="translate(402.2, 464.5)">
            <rect class="cls-3" x="-37.55" y="185.6" width="75.1" height="0">
              <animate attributeType="xml" attributeName="height" from="0" to="185.6" begin="5.8s" dur="2s" fill="freeze" />
              <animate attributeType="xml" attributeName="y" from="185.6" to="0" begin="5.8s" dur="2s" fill="freeze" />
            </rect>
          </g>

          <g id="_x34_" transform="translate(505.9, 384.4)">
            <rect class="cls-2" x="-37.55" y="265.7" width="75.1" height="0">
              <animate attributeType="xml" attributeName="height" from="0" to="265.7" begin="8s" dur="2s" fill="freeze" />
              <animate attributeType="xml" attributeName="y" from="265.7" to="0" begin="8s" dur="2s" fill="freeze" />
            </rect>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

Please signup or login to give your own answer.

Click here to cancel reply.

previous post: Reactjs – TypeScript Error: defineRouting expects 0 arguments but got 1 during npm run build