WordPress Menu - SVG <path> Animation on Menu Items

Question

I'm making a menu in WordPress and a question arose: is it possible to embed SVG code in the menu items so that when clicked on them, the <path> animation is triggered?

In the example below, the SVGs are simple, do not pay attention, in the original SVGs will be complex with several <path>. Built-in icons are not suitable. Background SVGs via CSS are not suitable. We need SVG code embedded in the WordPress menu items. All SVGs should be different and work like the example below. How to do this in WordPress menu? If such a menu can be created in Walker, then how can I make sure that each menu item has its own complex SVG (not an icon!)?

body {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  height: 100vh;
}

ul {
  background-color: blueviolet;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 30px;
  width: 100%;
  font-size: 0;
  padding: 30px;
}

ul li {
  list-style: none;
  width: 100px;
  height: 100px;
}

ul li svg {
  overflow: visible;
}
ul li a svg > * {
  transform-origin: center;
}

ul li:nth-child(1) svg {
  fill: #deb887;
}

ul li:nth-child(2) svg {
  fill: rgb(135, 222, 193);
}

ul li:nth-child(3) svg {
  fill: rgb(222, 135, 222);
}

ul li:nth-child(1) a:hover svg rect {
  fill: #f78e05;
  animation: puls-rect 0.4s ease 0.1s;
}
@keyframes puls-rect {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: matrix(0.78, 0.78, -0.78, 0.78, 0, 0);
  }
}

ul li:nth-child(2) a:hover svg circle {
  fill: rgb(5, 252, 169);
  animation: puls-circle 0.4s ease 0.1s;
}

@keyframes puls-circle {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: matrix(0.5, 0, 0, 0.5, 0, 0);
  }
}

ul li:nth-child(3) a svg path {
  transform: matrix(1.1, 0, 0, 1.2, 0, 9);
}

ul li:nth-child(3) a:hover svg path {
  fill: rgb(252, 5, 252);
  animation: puls-poligon 0.4s ease 0.1s;
}

@keyframes puls-poligon {
  0%,
  100% {
    transform: matrix(1.1, 0, 0, 1.2, 0, 9);
  }
  50% {
    transform: matrix(1.18, -0.55, 0.59, 1.27, 0, 9);
  }
}

<nav>
        <ul>
            <li>
                <a title="portfolio" href="#">Works
                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                        <rect x="0" y="0" width="100%" height="100%" rx="10" ry="10" />
                    </svg>
                </a>
            </li>
            <li>
                <a title="blog" href="#">Blog
                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="50" cy="50" r="50" />
                    </svg>
                </a>
            </li>
            <li>
                <a title="arhive" href="#">Arhive
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 81.82">
                        <path fill-rule="evenodd"
                            d="m56.67 3.66 21.57 33.85 20.49 32.15a7.9 7.9 0 0 1-6.67 12.16H7.94a7.9 7.9 0 0 1-6.67-12.16l20.49-32.15L43.33 3.66a7.91 7.91 0 0 1 13.34 0Z" />
                    </svg>
                </a>
            </li>
        </ul>
    </nav>

Answer 1

Thank you for your responses. I don't like unnecessary code and am always looking for a simple solution. If you have to connect Walker_Nav_Menu, then why not use this tool? I found this example online (special thanks to the author of the menu!).

Everything you need is here. SVG is embedded into menu items, and the output is code on the page and <path> to which CSS animation can be applied. Pay attention to this line:

$icon = file_get_contents(get_stylesheet_directory_uri().'/assets/images/icons/icon-'.$slug.'.svg');

Thanks to item-{slug}.svg we connect different SVGs to different menu items. Instead of the icon- prefix, you can write anything, it doesn’t matter here. The main thing is not to forget to add this prefix to the names of the SVG files.

I slightly modified the code to suit my needs, redid the paths, removed classes I didn’t need, everything works. The site is not in English, so I had to change the title in some places to attr_title.

The code is seven years old, and if anyone has any complaints about it, I will be glad if you suggest something better.