SVG strategy for simple text animation – acronym to full company name

Thankyou in advance for any feedback you might have.

SVG graphic creation and animation seems like the wild wild west searching between solutions (Sketch, SnapSVG, Raphael, AI). However, when it comes to WordPress, only certain SVG applications work when using as an external SVG file, or a copied “Embed” code.

I’m trying to achieve a simple effect that animates a company acronym on hover, expanding the logo area to display the whole company name. Testing this on a personal project before I apply to a commercial application. The “trigger” effect which cues the animation could be jquery, CSS, or embedded in the SVG… doesn’t matter to me. However, the goal is to preserve as much of the animation functionality within the SVG file itself in the interests of portability and responsive scaling. Externalizing fonts, jquery, and css does not resolve the issue.

The following example demonstrates the desired effect in pure SVG form….
https://simondelasalle.com/wp-content/themes/sdls-2023-uncode/template-test-wordmark-click.svg

Here’s the code:

  <svg xmlns="http://www.w3.org/2000/svg" width="600" height="200" xmlns:xlink="http://www.w3.org/1999/xlink">
    <style type="text/css">
        @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;500;900&amp;display=swap');
        .brace {
            font-family: 'Nunito', sans-serif;
            font-weight: 200;
            font-size: 80px;
            line-height: 70px;
        }
        .acronym {
            font-family: 'Nunito', sans-serif;
            font-weight: 900;
            font-size: 40px;
            text-transform: uppercase;
            letter-spacing: -2.4px;
        }
        .company-name {
            font-family: 'Nunito', sans-serif;
            font-weight: 500;
            font-size: 24px;
        }
        .subheader {
            font-family: 'Nunito', sans-serif;
            font-weight: 200;
            font-size: 14px;
            color: #666;
            text-align: center;
        }
    </style>

    <!-- Left brace -->
    <text class="brace left-brace" x="0" y="100">{</text>

    <!-- Acronym letters -->
    <g id="acronym-group" class="acronym" transform="translate(36, 73)">
      <text class="letter" x="0" y="0">S</text>
      <text class="letter" x="35" y="0">D</text>
      <text class="letter" x="2" y="40">L</text>
      <text class="letter" x="37" y="40">S</text>
    </g>

    <!-- Full company name -->
    <g id="company-group" class="company-details" transform="translate(26, 75)" opacity="0">
      <text class="company-name" x="0" y="0">Simon de la Salle</text>
      <text class="subheader" x="0" y="20">Web Design &amp; Development</text>
    </g>

    <!-- Right brace -->
    <text class="brace right-brace" x="110" y="100">}</text>

    <!-- JavaScript logic -->
    <script type="application/ecmascript">
      <![CDATA[
        document.addEventListener('DOMContentLoaded', function() {
          const acronymGroup = document.getElementById('acronym-group');
          const companyName = document.getElementById('company-group');
          const leftBrace = document.querySelector('.left-brace');
          const rightBrace = document.querySelector('.right-brace');
          let showingAcronym = true;

          // Function to animate in the company name
          function showCompanyName() {
            acronymGroup.style.transition = "opacity 0.6s ease-out, transform 0.6s ease-out";
            acronymGroup.style.opacity = 0;
            // acronymGroup.style.transform = "translateX(-100px)"; // Slide out to the left

            companyName.style.transition = "opacity 0.6s ease-out, transform 0.6s ease-out";
            companyName.style.opacity = 1;  
            // companyName.style.transform = "translate(100)"; // Slide back into place

              
            leftBrace.style.transition = "font-size 0.6s ease, transform 0.6s ease-out, transform 0.6s ease-out";
            leftBrace.style.fontSize = "40px";
            leftBrace.style.transform = "translate(0,-12px)";
              
            rightBrace.style.transition = "font-size 0.6s ease, transform 0.6s ease-out, transform 0.6s ease-out";
            rightBrace.style.fontSize = "40px";
            rightBrace.style.transform = "translate(116px,-12px)"; 

            showingAcronym = false;
          }

          // Function to animate back to the acronym
          function showAcronym() {
            // acronymGroup.style.transform = "translateX(100, 75)"; // Slide back into place
            acronymGroup.style.opacity = 1;

            companyName.style.opacity = 0;

            leftBrace.style.transition = "font-size 0.6s ease, transform 0.6s ease-out";
            leftBrace.style.fontSize = "80px";
            leftBrace.style.transform = "translateX(0)"; 
              
            rightBrace.style.transition = "font-size 0.6s ease, transform 0.6s ease-out";
            rightBrace.style.fontSize = "80px";
            rightBrace.style.transform = "translateX(0)"; 

            showingAcronym = true;
          }

          // Add click event listener
          document.addEventListener('click', function() {
            if (showingAcronym) {
              showCompanyName();
            } else {
              showAcronym();
            }
          });
        });
      ]]>
    </script>
  </svg>

When implementing within a WordPress environment (such as a theme logo) either as an uploaded SVG or Oembed the animation does not display.

Here is an example of an SVG animation that does work in WordPress (doesn’t have any mouseover interaction, but animation works correctly):
https://sdlsdevelop.wpenginepowered.com/wp-content/uploads/2024/08/icon-software_layers2-MajorelleBlue.svg

Any ideas on what I’m doing wrong in the creation of an SVG that is sensitive to “hover”?

Thanks for your time in advance stackers!