vue-svg-loader加载SVG丢失path等可交互元素的问题求助

前置说明 #

• 已在对应项目GitHub仓库提交issue暂未得到回应，尝试在Webpack配置中调整SVGO参数未达到预期效果，寻求可行解法
• 业务使用场景：基于SVG制作可交互平面图，文件结构为底层嵌入图像作为平面图底图，上层叠加多个支持鼠标悬浮高亮的形状元素，所有元素均设置ID属性，用于Vue组件内绑定点击交互逻辑
• 加载异常表现：经vue-svg-loader加载该SVG文件后，仅保留底层的图像块，所有叠加在上方的shape元素全部被移除

已尝试的配置方案 #

通过vue.config.js的Webpack链式配置重写SVG处理规则，相关代码如下：

module.exports = {
    chainWebpack: config => {
        const svgRule = config.module.rule('svg')  
        svgRule.uses.clear()
        svgRule
            .use('babel-loader')
            .loader('babel-loader')
            .end()
            .use('vue-svg-loader')
            .loader('vue-svg-loader')
            .options({
                svgo: {
                    plugins: [                                    
                        { collapseGroups: false },
                        { removeEmptyContainers: false },
                        { convertPathData: false },
                        { mergePaths: false },
                        { cleanupIDs: false },
                        { collapseGroups: false },
                        { removeNonInheritableGroupAttrs: false }
                    ]
                }
            }
        );
    }
}

源SVG结构参考 #

<svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    <!-- 省略其余根节点声明属性 -->
    <g
        inkscape:groupmode="layer"
        inkscape:label="Image"
        id="g54">
        <image
            width="2133.3333"
            height="1284"
            preserveAspectRatio="none"
            xlink:href="data:image/png;base64,[超长base64编码的底图内容]"
            id="floorplanimg"
            style="fill:#ffe680" />
        <path
            id="kitchen"
            style="opacity:0;fill:#ffcc00;fill-rule:evenodd"
            inkscape:label="OpenSpace"
            d="m 555.11237,74.960426 1053.49783,2.025958 2.4071,273.758356 -642.35555,-2.153 -2.28007,161.94959 H 555.11237 Z"
            sodipodi:nodetypes="ccccccc"
            onmouseover="this.style.opacity=0.4"
            onmouseout="this.style.opacity=0" />
        <!-- 其余同结构的path交互元素 -->
    </g>
</svg>

待解决问题 #

现有SVGO配置为什么未生效，遗漏了哪些必要配置会导致非图像类的SVG元素被自动移除？

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