在网页中注入代码时可视化 svg 的问题

如何解决在网页中注入代码时可视化 svg 的问题

我有一个小的圆形 div，我将它注入到网页中。此 div 应包含与其 css 相同的文件中包含的 svg 徽标。当我尝试将它作为 html 文件运行时，一切正常，但是当我尝试注入 div 时，svg 未显示。

svg：

<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" height="30" viewBox="0 0 80 80" width="30">
    <linearGradient id="a">
        <stop offset="0" stop-color="#ffffff"/>
        <stop offset="1" stop-color="#ffffff"/>
    </linearGradient>
    <linearGradient id="b" gradientTransform="matrix(2.8526535 -16.17816 -16.17816 -2.8526535 28.345703 38.257812)" gradientUnits="userSpaceOnUse" spreadMethod="pad" x1="0" x2="1" xlink:href="#a" y1="0" y2="0"/>
    <linearGradient id="c" gradientTransform="matrix(2.396317 -13.590154 -13.590154 -2.396317 28.575195 51.496094)" gradientUnits="userSpaceOnUse" spreadMethod="pad" x1="0" x2="1" xlink:href="#a" y1="0" y2="0"/>
    <linearGradient id="d" gradientTransform="matrix(1.5991275 -9.0690784 -9.0690784 -1.5991275 28.974609 62.074707)" gradientUnits="userSpaceOnUse" spreadMethod="pad" x1="0" x2="1" xlink:href="#a" y1="0" y2="0"/>
    <linearGradient id="e" gradientTransform="matrix(2.3971651 -13.594962 -13.594962 -2.3971651 28.574219 23.100586)" gradientUnits="userSpaceOnUse" spreadMethod="pad" x1="0" x2="1" xlink:href="#a" y1="0" y2="0"/>
    <linearGradient id="f" gradientTransform="matrix(1.5991275 -9.0690784 -9.0690784 -1.5991275 28.976074 7.995117)" gradientUnits="userSpaceOnUse" spreadMethod="pad" x1="0" x2="1" xlink:href="#a" y1="0" y2="0"/>
    <g transform="matrix(1.3333333 0 0 -1.3333333 0 80)">
        <path d="m4.78 34.01c-2.637 0-4.78-1.722-4.78-3.847 0-2.123 2.143-3.835 4.78-3.835h49.989c2.638 0 4.779 1.712 4.779 3.835 0 2.125-2.141 3.847-4.779 3.847z" fill="url(#b)"/>
        <path d="m8.782 47.928c-2.214 0-4.016-1.445-4.016-3.228 0-1.785 1.802-3.227 4.016-3.227h41.984c2.218 0 4.016 1.442 4.016 3.227 0 1.783-1.798 3.228-4.016 3.228z" fill="url(#c)"/>
        <path d="m17.545 60c-1.691 0-3.064-1.105-3.064-2.46 0-1.358 1.373-2.46 3.064-2.46h24.461c1.69 0 3.062 1.102 3.062 2.46 0 1.355-1.372 2.46-3.062 2.46z" fill="url(#d)"/>
        <path d="m8.782 19.534c-2.214 0-4.016-1.45-4.016-3.237 0-1.777 1.802-3.225 4.016-3.225h41.984c2.218 0 4.016 1.448 4.016 3.225 0 1.787-1.798 3.237-4.016 3.237z" fill="url(#e)"/>
        <path d="m17.545 5.92c-1.691 0-3.064-1.1-3.064-2.457 0-1.355 1.373-2.463 3.064-2.463h24.462c1.689 0 3.061 1.108 3.061 2.463 0 1.357-1.372 2.457-3.061 2.457z" fill="url(#f)"/>
    </g>
</svg>

这是CSS：

.logo {
    background: url("white_logo.svg") no-repeat;
    width: 30px;
    height: 30px;
    margin-top: 10px;
    margin-left: 10px;
    position: absolute;
}

.menu {
    opacity: 0.5;
    width: 50px;
    height: 50px;
    padding: 0px;
    background-color: #ff8c00;
    border-radius: 50%;
    /* touch-action: none; */
    /* user-select: none; */
}

.parent {
    position: fixed;
    z-index: 214748364;
    box-sizing: border-box;
}

这就是我设置 HTML 的方式：

<div class="parent">
    <div class="menu">
        <div class="logo"></div>
    <div>
<div>