从svg文件导入符号时获取[...] net :: ERR_ABORTED

Question

在我的index.html中，我正在导入一个单独的html文件，如下所示：

        <div id="scenarii">
            <scenarii></scenarii>
        </div>

使用Vue初始化元素：

let scenarii = new Vue({
    el: "#scenarii",
    template: [ ... stuff .... ],
    components: {scenariiMatrixComponent},

    data: {
        [ ... stuff .... ]
    }
});

在我的Vue组件的HTML中，我试图使用这样的svg：

                    <svg xmlns="http://www.w3.org/2000/svg">
                        <use href="../assets/img/sprites.svg#pen"></use>
                    </svg>

这是我的svg文件：

<svg xmlns="http://www.w3.org/2000/svg">
[ ... OTHER SYMBOLS ... ]
    <symbol id="pen" viewBox="-1585.104 -715.999 13.203 13.203">
        <title>Pen</title>
        <g>
            <path d="M3,13.45V16.2H5.75l8.111-8.111-2.75-
2.75ZM15.988,5.962a.73.73,0,0,0,0-1.034L14.272,3.212a.73.73,0,0,0-
1.034,0L11.9,4.554l2.75,2.75,1.342-1.342Z" 
transform="translate(-1588.104 -718.997)"/>
        </g>
    </symbol>
[ ... OTHER SYMBOLS ... ]
 </svg>

我收到错误：

GET http://localhost:8081/assets/img/sprites.svg net::ERR_ABORTED

svg文件似乎没问题，因为当我尝试直接从index.html显示它时，我可以显示笔图像......

有人看到这里有什么问题吗？