WordPress 菜单 - SVG <path> 菜单项上的动画

Question

我正在 WordPress 中制作菜单，出现了一个问题：是否可以在菜单项中嵌入 SVG 代码，以便单击它们时触发

<path>

动画？

下面的例子中，SVG很简单，不注意，原来的SVG会很复杂，有几个

<path>

。内置图标不适合。通过 CSS 的背景 SVG 不适合。我们需要将 SVG 代码嵌入到 WordPress 菜单项中。所有 SVG 都应该不同，并且工作方式如下例所示。如何在 WordPress 菜单中执行此操作？如果可以在 Walker 中创建这样的菜单，那么我如何确保每个菜单项都有自己的复杂 SVG（而不是图标！）？

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

感谢您的回复。我不喜欢不必要的代码，并且总是在寻找简单的解决方案。如果你必须连接Walker_Nav_Menu，那为什么不使用这个工具呢？我在网上找到了这个例子（特别感谢菜单的作者！）。

你需要的一切都在这里。 SVG 嵌入到菜单项中，输出是页面上的代码和可以应用 CSS 动画的

<path>

。注意这一行：

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

感谢

item-{slug}.svg

，我们将不同的 SVG 连接到不同的菜单项。除了图标之外，您可以写任何您想要的内容，这在这里并不重要。

我稍微修改了代码以满足我的需要，重新设置了路径，删除了我不需要的类，一切正常。该网站不是英文的，所以我不得不将某些地方的

title

更改为

attr_title

。

该代码已有七年历史，如果有人对此有任何抱怨，如果您提出更好的建议，我将很高兴。