WordPress菜单嵌入SVG代码实现<path>点击动画方案咨询

一、能否嵌入SVG并触发点击动画？ #

完全可以实现：

• WordPress原生菜单支持插入自定义HTML，直接把完整的SVG代码嵌入菜单项的<a>标签内即可，复杂多<path>的SVG也完全兼容。
• 点击触发<path>动画可以通过CSS的:active伪类（点击状态）实现，或者结合JavaScript监听click事件。你提供的示例是hover动画，只需要把a:hover替换为a:active（或a:focus兼顾键盘导航）就能改成点击触发。

二、用Walker类实现每个菜单项的专属复杂SVG #

要给每个菜单项配置独立的复杂SVG，通过自定义Walker类+菜单项自定义字段的组合是最灵活的方案，步骤如下：

1. 给菜单项添加自定义SVG字段 #

先在后台菜单编辑界面添加一个自定义字段，用于存储每个菜单项的专属SVG代码。将以下代码添加到主题的functions.php：

// 添加菜单项自定义SVG字段
add_action('wp_nav_menu_item_custom_fields', 'add_menu_item_svg_field', 10, 4);
function add_menu_item_svg_field($item_id, $item, $depth, $args) {
    $svg_code = get_post_meta($item_id, '_menu_item_svg_code', true);
    ?>
    <div class="field-svg-code">
        <label for="menu-item-svg-code-<?php echo $item_id; ?>">SVG代码</label>
        <textarea id="menu-item-svg-code-<?php echo $item_id; ?>" name="menu-item-svg-code[<?php echo $item_id; ?>]" rows="5" cols="50"><?php echo esc_textarea($svg_code); ?></textarea>
        <p class="description">粘贴该菜单项的专属SVG代码</p>
    </div>
    <?php
}

// 保存菜单项自定义SVG字段
add_action('wp_update_nav_menu_item', 'save_menu_item_svg_field', 10, 3);
function save_menu_item_svg_field($menu_id, $item_id, $item) {
    if (isset($_POST['menu-item-svg-code'][$item_id])) {
        update_post_meta($item_id, '_menu_item_svg_code', wp_kses_post($_POST['menu-item-svg-code'][$item_id]));
    } else {
        delete_post_meta($item_id, '_menu_item_svg_code');
    }
}

这段代码会在菜单编辑页的每个菜单项下方添加文本框，用来粘贴对应的SVG代码。

2. 创建自定义Walker类 #

继承Walker_Nav_Menu，重写start_el方法，在输出菜单项链接时插入存储的SVG代码：

class Custom_SVG_Walker extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $svg_code = get_post_meta($item->ID, '_menu_item_svg_code', true);
        
        // 构建菜单项基础结构
        $output .= '<li class="' . esc_attr(implode(' ', $item->classes)) . '">';
        $output .= '<a href="' . esc_url($item->url) . '" title="' . esc_attr($item->title) . '">';
        $output .= esc_html($item->title);
        
        // 插入专属SVG代码（如果存在）
        if (!empty($svg_code)) {
            $output .= $svg_code;
        }
        
        $output .= '</a></li>';
    }
}

可以根据需求调整HTML结构，比如给SVG添加统一类名方便CSS批量控制。

3. 在模板中调用自定义菜单 #

在主题的导航模板（如header.php）中，使用wp_nav_menu指定自定义Walker：

wp_nav_menu(array(
    'theme_location' => 'primary-menu', // 替换为你的菜单位置
    'walker' => new Custom_SVG_Walker(),
    'container' => 'nav',
    'menu_class' => 'svg-menu'
));

4. 点击触发SVG动画的CSS示例 #

把hover动画改成点击触发，同时针对每个菜单项的SVG做独立动画：

/* 基础菜单样式 */
.svg-menu {
    background-color: blueviolet;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
    width: 100%;
    padding: 30px;
    list-style: none;
}

.svg-menu li {
    width: 100px;
    height: 100px;
}

.svg-menu li svg {
    overflow: visible;
    width: 100%;
    height: 100%;
}

.svg-menu li a svg > * {
    transform-origin: center;
}

/* 菜单项1的SVG样式与点击动画（替换为实际菜单项ID对应的类） */
.svg-menu li.menu-item-123 svg path {
    fill: #deb887;
}

.svg-menu li.menu-item-123 a:active svg path {
    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); }
}

/* 菜单项2的SVG样式与点击动画 */
.svg-menu li.menu-item-456 svg path {
    fill: rgb(135, 222, 193);
}

.svg-menu li.menu-item-456 a:active svg path {
    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); }
}

通过菜单项的专属类（如menu-item-{ID}）可以精准控制每个菜单项的SVG动画，即使是多path的复杂SVG，也可以给path添加类名或通过父选择器单独设置动画。

内容的提问来源于stack exchange，提问作者Phillip