SVG无法在Safari浏览器中正确显示形状

Question

我使用innterHtml属性和safeHtml管道显示可以正常工作的SVG图像：

<div id="svgid" [innerHtml]="avatarSVG | safeHtml"></div>

Safari浏览器中无法塑造某些形式的除外：

生成的SVG：

 <svg width="100" height="106" viewBox="0 0 264 280" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:link="http://www.w3.org/1999/xlink">
    <desc>Created by devslane.com</desc>
    <defs>
        <circle id="path-1" cx="120" cy="120" r="120" />
        <path d="M12,160 C12,226.27417 65.72583,280 132,280 C198.27417,280 252,226.27417 252,160 L264,160 L264,-1.42108547e-14 L-3.19744231e-14,-1.42108547e-14 L-3.19744231e-14,160 L12,160 Z" id="path-3" />
        <path d="M124,144.610951 L124,163 L128,163 L128,163 C167.764502,163 200,195.235498 200,235 L200,244 L0,244 L0,235 C-4.86974701e-15,195.235498 32.235498,163 72,163 L72,163 L76,163 L76,144.610951 C58.7626345,136.422372 46.3722246,119.687011 44.3051388,99.8812385 C38.4803105,99.0577866 34,94.0521096 34,88 L34,74 C34,68.0540074 38.3245733,63.1180731 44,62.1659169 L44,56 L44,56 C44,25.072054 69.072054,5.68137151e-15 100,0 L100,0 L100,0 C130.927946,-5.68137151e-15 156,25.072054 156,56 L156,62.1659169 C161.675427,63.1180731 166,68.0540074 166,74 L166,88 C166,94.0521096 161.51969,99.0577866 155.694861,99.8812385 C153.627775,119.687011 141.237365,136.422372 124,144.610951 Z" id="path-5" />
    </defs>
    <g id="Avataaar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g transform="translate(-825.000000, -1100.000000)" id="Avataaar/Circle">
            <g transform="translate(825.000000, 1100.000000)">
                <g id="Circle" stroke-width="1" fill-rule="evenodd" transform="translate(12.000000, 40.000000)">
                    <mask id="mask-2" fill="white">
                        <use href="#path-1" />
                    </mask>
                    <use id="Circle-Background" fill="#a5e7ff" href="#path-1" />
                    <g id="Color/Palette/Blue-01" mask="url(#mask-2)" fill="#a5e7ff">
                        <rect id="pen-Color" x="0" y="0" width="240" height="240" />
                    </g>
                </g>
                <mask id="mask-4" fill="white">
                    <use href="#path-3" />
                </mask>
                <g id="Mask" />
                <g id="Avataaar" stroke-width="1" fill-rule="evenodd" mask="url(#mask-4)">
                    <g id="Body" transform="translate(32.000000, 36.000000)">
                        <mask id="mask-6" fill="white">
                            <use href="#path-5" />
                        </mask>
                        <use fill="#EDB98A" href="#path-5" />

                        <g id='Color/Palette/Gray-01' mask='url(#mask-6)' fill-rule='evenodd' fill='#EDB98A'>
                            <rect id='pen-Color' x='0' y='0' width='264' height='110' />
                        </g>
                        <path d="M156,79 L156,102 C156,132.927946 130.927946,158 100,158 C69.072054,158 44,132.927946 44,102 L44,79 L44,94 C44,124.927946 69.072054,150 100,150 C130.927946,150 156,124.927946 156,94 L156,79 Z" id="Neck-Shadow" fill-opacity="0.100000001" fill="#000000" mask="url(#mask-6)" />
                    </g>

                    <g id="Clothing/Blazer-+-Shirt" transform="translate(0.000000, 170.000000)">
                        <defs>
                            <path d="M133.960472,0.294916112 C170.936473,3.32499816 200,34.2942856 200,72.0517235 L200,81 L0,81 L0,72.0517235 C1.22536245e-14,33.9525631 29.591985,2.76498122 67.0454063,0.219526408 C67.0152598,0.593114549 67,0.969227185 67,1.34762511 C67,13.2107177 81.9984609,22.8276544 100.5,22.8276544 C119.001539,22.8276544 134,13.2107177 134,1.34762511 C134,0.994669088 133.986723,0.64370138 133.960472,0.294916112 Z" id="cloth_path" />
                        </defs>
                        <g id="Shirt" transform="translate(32.000000, 29.000000)">
                            <mask id="cloth_mask" fill="white">
                                <use href="#path1" />
                            </mask>
                            <use id="Clothes" fill="#262E33" href="#cloth_path" />
                            <g id="Color/Palette/Black" mask="url(#cloth_mask)" fill="#262E33">
                                <g transform="translate(-32.000000, -29.000000)" id="pen-Color">
                                    <rect x="0" y="0" width="264" height="110" />
                                </g>
                            </g>
                            <g id="Shadowy" opacity="0.599999964" mask="url(#cloth_mask)" fill-opacity="0.16" fill="#000000">
                                <g transform="translate(60.000000, -25.000000)" id="Hola">
                                    <ellipse cx="40.5" cy="27.8476251" rx="39.6351047" ry="26.9138272" />
                                </g>
                            </g>
                        </g>
                        <g id="Blazer" transform="translate(32.000000, 28.000000)">
                            <path d="M68.784807,1.12222847 C30.512317,2.80409739 -1.89486556e-14,34.3646437 -1.42108547e-14,73.0517235 L0,73.0517235 L0,82 L69.3616767,82 C65.9607412,69.9199941 64,55.7087296 64,40.5 C64,26.1729736 65.7399891,12.7311115 68.784807,1.12222847 Z M131.638323,82 L200,82 L200,73.0517235 C200,34.7067641 170.024954,3.36285166 132.228719,1.17384225 C135.265163,12.7709464 137,26.1942016 137,40.5 C137,55.7087296 135.039259,69.9199941 131.638323,82 Z" id="Saco" fill="#3A4C5A" />
                            <path d="M149,58 L158.555853,50.83311 L158.555853,50.83311 C159.998897,49.7508275 161.987779,49.7682725 163.411616,50.8757011 L170,56 L149,58 Z" id="Pocket-hanky" fill="#E6E6E6" />
                            <path d="M69,1.13686838e-13 C65,19.3333333 66.6666667,46.6666667 74,82 L58,82 L44,46 L50,37 L44,31 L63,1 C65.027659,0.369238637 67.027659,0.0359053037 69,1.13686838e-13 Z" id="Wing" fill="#2F4351" />
                            <path d="M151,1.13686838e-13 C147,19.3333333 148.666667,46.6666667 156,82 L140,82 L126,46 L132,37 L126,31 L145,1 C147.027659,0.369238637 149.027659,0.0359053037 151,1.13686838e-13 Z" id="Wing" fill="#2F4351" transform="translate(141.000000, 41.000000) scale(-1, 1) translate(-141.000000, -41.000000) " />
                        </g>
                    </g>
                    <g id="Face" transform="translate(76.000000, 82.000000)" fill="#000000">

                        <g id="Nose/Default" transform="translate(28.000000, 40.000000)" fill-opacity="0.16">
                            <path d="M16,8 C16,12.418278 21.372583,16 28,16 L28,16 C34.627417,16 40,12.418278 40,8" id="Nose" />
                        </g>

                    </g>

                    <g id="Top" stroke-width="1" fill-rule="evenodd">
                        <defs>
                            <rect id="no_hair_rect" x="0" y="0" width="264" height="280" />
                            <filter x="-0.8%" y="-2.0%" width="101.5%" height="108.0%" filterUnits="objectBoundingBox" id="no_hair_filter">
                                <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
                                <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.16 0" type="matrix" in="shadowOffsetOuter1" result="shadowMatrixOuter1" />
                                <feMerge>
                                    <feMergeNode in="shadowMatrixOuter1" />
                                    <feMergeNode in="SourceGraphic" />
                                </feMerge>
                            </filter>
                        </defs>
                        <mask id="no_hair_mask" fill="white">
                            <use href="#no_hair_rect" />
                        </mask>
                        <g id="Mask" />
                        <g id="Top/No-Hair" mask="url(#no_hair_mask)">
                            <g transform="translate(-1.000000, 0.000000)"></g>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

我缺少一些特定的东西吗？ SVG是否误用了某个属性以使其可以与野生动物园配合使用？

我尽量不要使用<object data=""></object>，因为这些化身在单个页面中被多次使用，并且将这些动态更新的svg保存在不同的文件中似乎并不可行。