来自外部符号表的带有 <defs> 的 SVG 未在 Firefox 或 Safari 中加载

Question

我们从文件夹中托管的符号表加载 SVG，assets/并使用<use>. 这对于仅定义 s 的 SVG 非常有用<path>，但我们注意到任何具有附加内容<defs>（例如剪辑路径、过滤器等）的 SVG 都无法在 Firefox 和 Safari 中加载。如果我们改为使用内联 SVG 元素，它将在所有浏览器中按预期呈现。我对 SVG 不太了解，我试图了解正在发生的事情，以便我可以为团队实施最佳解决方案。

SVG 符号表：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="close" fill="black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
            <path d="M 7 4 C 6.744125 4 6.4879687 4.0974687 6.2929688 4.2929688 L 4.2929688 6.2929688 C 3.9019687 6.6839688 3.9019687 7.3170313 4.2929688 7.7070312 L 11.585938 15 L 4.2929688 22.292969 C 3.9019687 22.683969 3.9019687 23.317031 4.2929688 23.707031 L 6.2929688 25.707031 C 6.6839688 26.098031 7.3170313 26.098031 7.7070312 25.707031 L 15 18.414062 L 22.292969 25.707031 C 22.682969 26.098031 23.317031 26.098031 23.707031 25.707031 L 25.707031 23.707031 C 26.098031 23.316031 26.098031 22.682969 25.707031 22.292969 L 18.414062 15 L 25.707031 7.7070312 C 26.098031 7.3170312 26.098031 6.6829688 25.707031 6.2929688 L 23.707031 4.2929688 C 23.316031 3.9019687 22.682969 3.9019687 22.292969 4.2929688 L 15 11.585938 L 7.7070312 4.2929688 C 7.5115312 4.0974687 7.255875 4 7 4 z" />
        </symbol>

        <symbol id="selectingFile" viewBox="0 0 163 157" fill="none"><defs><filter id="filter0_d_3067_12751" x="46.3838" y="21.7812" width="107.724" height="129.292" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter1_d_3067_12751" x="110.765" y="28.9346" width="59.2979" height="61.8789" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter2_d_3067_12751" x="37.3975" y="24.4741" width="93.4717" height="117.553" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter3_d_3067_12751" x="86.252" y="19.3281" width="60.5449" height="58.479" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter4_d_3067_12751" x="27.4434" y="6" width="86.5293" height="111.329" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter5_d_3067_12751" x="69.0947" y="-4.25391" width="60.7969" height="56.8706" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter6_d_3067_12751" x="2.2666" y="25.5039" width="100.029" height="118.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter7_d_3067_12751" x="43.7129" y="14.8882" width="62.7393" height="56.7388" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><clipPath id="clip0_3067_12751"><rect width="163" height="157" fill="white"/></clipPath></defs><g clip-path="url(#clip0_3067_12751)"><g filter="url(#filter0_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M136.062 41.7522L83.2021 24.8763C82.1499 24.5404 81.0245 25.1211 80.6886 26.1733L50.4794 120.797C50.1435 121.849 50.7241 122.974 51.7764 123.31L122.776 145.977C123.828 146.313 124.953 145.732 125.289 144.68L150.107 66.9437L136.062 41.7522Z" fill="white"/></g><g filter="url(#filter1_d_3067_12751)"><path d="M150.062 66.8135L138.424 45.96C137.571 44.4314 135.305 44.6588 134.773 46.3264L130.859 58.5833C130.524 59.6356 131.104 60.7609 132.156 61.0969L150.062 66.8135Z" fill="white"/></g><g filter="url(#filter2_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M107.662 32.408L52.3925 27.4822C51.2923 27.3842 50.3209 28.1966 50.2228 29.2968L41.4053 128.233C41.3073 129.333 42.1197 130.305 43.2199 130.403L117.455 137.019C118.556 137.117 119.527 136.305 119.625 135.204L126.869 53.9244L107.662 32.408Z" fill="white"/></g><g filter="url(#filter3_d_3067_12751)"><path d="M126.797 53.8071L110.885 35.9982C109.719 34.6929 107.557 35.4096 107.402 37.1532L106.26 49.9688C106.162 51.069 106.974 52.0404 108.074 52.1385L126.797 53.8071Z" fill="white"/></g><g filter="url(#filter4_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M88.9315 9H33.4434C32.3388 9 31.4434 9.89543 31.4434 11V110.329C31.4434 111.433 32.3388 112.329 33.4434 112.329H107.973C109.078 112.329 109.973 111.433 109.973 110.329V28.7265L88.9315 9Z" fill="white"/></g><g filter="url(#filter5_d_3067_12751)"><path d="M109.891 28.6165L92.462 12.2904C91.1845 11.0937 89.0947 11.9996 89.0947 13.75V26.6165C89.0947 27.721 89.9902 28.6165 91.0947 28.6165H109.891Z" fill="white"/></g><g filter="url(#filter6_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M62.8912 28.5039L7.97924 36.4773C6.88614 36.636 6.12867 37.6508 6.28739 38.7439L20.5604 137.042C20.7191 138.135 21.7339 138.892 22.8271 138.734L96.5833 128.024C97.6764 127.865 98.4339 126.85 98.2752 125.757L86.5494 45.0024L62.8912 28.5039Z" fill="white"/></g><g filter="url(#filter7_d_3067_12751)"><path d="M86.4521 44.9049L66.8578 31.2528C65.4216 30.2521 63.4837 31.4488 63.7352 33.1812L65.5841 45.9141C65.7428 47.0072 66.7576 47.7646 67.8507 47.6059L86.4521 44.9049Z" fill="white"/></g></g></symbol>
    </defs>
</svg>

索引.html：

<html>
  <body>
    <p>External SVG w/ defs</p>
    <svg xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="assets/icons.svg#selectingFile"></use>
    </svg>

    <p>External SVG no defs</p>
    <svg xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="assets/icons.svg#close"></use>
    </svg>

    <p>Inline SVG w/ defs</p>
    <svg id="selectingFile" viewBox="0 0 163 157" fill="none"><defs><filter id="filter0_d_3067_12751" x="46.3838" y="21.7812" width="107.724" height="129.292" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter1_d_3067_12751" x="110.765" y="28.9346" width="59.2979" height="61.8789" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter2_d_3067_12751" x="37.3975" y="24.4741" width="93.4717" height="117.553" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter3_d_3067_12751" x="86.252" y="19.3281" width="60.5449" height="58.479" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter4_d_3067_12751" x="27.4434" y="6" width="86.5293" height="111.329" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter5_d_3067_12751" x="69.0947" y="-4.25391" width="60.7969" height="56.8706" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter6_d_3067_12751" x="2.2666" y="25.5039" width="100.029" height="118.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="2"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><filter id="filter7_d_3067_12751" x="43.7129" y="14.8882" width="62.7393" height="56.7388" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="10"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3067_12751"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3067_12751" result="shape"/></filter><clipPath id="clip0_3067_12751"><rect width="163" height="157" fill="white"/></clipPath></defs><g clip-path="url(#clip0_3067_12751)"><g filter="url(#filter0_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M136.062 41.7522L83.2021 24.8763C82.1499 24.5404 81.0245 25.1211 80.6886 26.1733L50.4794 120.797C50.1435 121.849 50.7241 122.974 51.7764 123.31L122.776 145.977C123.828 146.313 124.953 145.732 125.289 144.68L150.107 66.9437L136.062 41.7522Z" fill="white"/></g><g filter="url(#filter1_d_3067_12751)"><path d="M150.062 66.8135L138.424 45.96C137.571 44.4314 135.305 44.6588 134.773 46.3264L130.859 58.5833C130.524 59.6356 131.104 60.7609 132.156 61.0969L150.062 66.8135Z" fill="white"/></g><g filter="url(#filter2_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M107.662 32.408L52.3925 27.4822C51.2923 27.3842 50.3209 28.1966 50.2228 29.2968L41.4053 128.233C41.3073 129.333 42.1197 130.305 43.2199 130.403L117.455 137.019C118.556 137.117 119.527 136.305 119.625 135.204L126.869 53.9244L107.662 32.408Z" fill="white"/></g><g filter="url(#filter3_d_3067_12751)"><path d="M126.797 53.8071L110.885 35.9982C109.719 34.6929 107.557 35.4096 107.402 37.1532L106.26 49.9688C106.162 51.069 106.974 52.0404 108.074 52.1385L126.797 53.8071Z" fill="white"/></g><g filter="url(#filter4_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M88.9315 9H33.4434C32.3388 9 31.4434 9.89543 31.4434 11V110.329C31.4434 111.433 32.3388 112.329 33.4434 112.329H107.973C109.078 112.329 109.973 111.433 109.973 110.329V28.7265L88.9315 9Z" fill="white"/></g><g filter="url(#filter5_d_3067_12751)"><path d="M109.891 28.6165L92.462 12.2904C91.1845 11.0937 89.0947 11.9996 89.0947 13.75V26.6165C89.0947 27.721 89.9902 28.6165 91.0947 28.6165H109.891Z" fill="white"/></g><g filter="url(#filter6_d_3067_12751)"><path fill-rule="evenodd" clip-rule="evenodd" d="M62.8912 28.5039L7.97924 36.4773C6.88614 36.636 6.12867 37.6508 6.28739 38.7439L20.5604 137.042C20.7191 138.135 21.7339 138.892 22.8271 138.734L96.5833 128.024C97.6764 127.865 98.4339 126.85 98.2752 125.757L86.5494 45.0024L62.8912 28.5039Z" fill="white"/></g><g filter="url(#filter7_d_3067_12751)"><path d="M86.4521 44.9049L66.8578 31.2528C65.4216 30.2521 63.4837 31.4488 63.7352 33.1812L65.5841 45.9141C65.7428 47.0072 66.7576 47.7646 67.8507 47.6059L86.4521 44.9049Z" fill="white"/></g></g></svg>
  </body>
</html>

不幸的是，由于外部文件要求，我无法发布代码片段，但在本地下载这两个文件并从网络服务器提供服务会重现该问题。任何建议/建议都会有帮助。

Answer 1

目前，浏览器处理<defs>外部 svgs 内容的方式完全不同：
许多定义，如剪辑路径、渐变、蒙版或样式将被省略。

快速解决：

您不需要将<symbol>元素包装在 中<defs>，因为默认情况下它们是不可见的。
像这样移动<defs>到外部 svg 的根目录。
嵌套<defs>也将被忽略。

<svg  viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="filter1">
            <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
        </filter>
    </defs>
    <symbol id="symbol1">
        <rect filter="url(#filter1)" x="25%" y="25%" width="50%" height="50%" fill="orange"  />
    </symbol>
</svg>   

由于你的矩形clip-path="url(#clip0_3067_12751)"不会剪切任何东西 - 这个修复可能就足够了。

其他陷阱：渐变、蒙版、剪辑路径

通过这种结构，Firefox 还将应用外部定义的剪辑路径和遮罩<defs>！...
Chromium 会忽略这些 - 啊！！！

左：Chromium：剪辑路径、遮罩、省略渐变。应用过滤器
右：Firefox（预期结果）

解决方法：将剪辑路径等移动到内联 svg

将它们移至<defs>内联隐藏<svg>. 通过零宽度和高度属性（
例如. 或者将删除/禁用渐变、剪辑路径等。width:0; height:0;position:absolute;
display:nonevisibility:hidden

简化的 test.svg（用于本地测试）

<svg  viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <filter id="filter1">
            <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
        </filter>
    </defs>
    <symbol id="symbol1">
        <rect filter="url(#filter1)" x="25%" y="25%" width="50%" height="50%" fill="orange"  />
    </symbol>
</svg>   

符号中的子元素样式

如上面的代码片段所示，您可以（在某种程度上）在<symbol>定义中使用 css 变量，这些变量可以通过<use>样式属性重新定义。

<line x1="0" y1="0" x2="100" y2="0" stroke="var(--stroke)"/>  

所有主流浏览器都很好地支持 CSS 变量。
当在 svg 中使用时， CSScalc()方法与变量结合使用仍然有点不可预测。所以你肯定需要一些额外的跨浏览器测试。

<use href="#symbol" style="--stroke: red;" />

已弃用的xlink:href属性

确实，您应该切换到现代属性/语法href。值得注意的是：几乎所有浏览器
仍然完全支持已弃用的旧语法。请参阅caniuse 记录。但是，许多仅支持 ~svg.1.1 功能的桌面应用程序 仍然需要它。 为了获得最佳的向后兼容性，您可以添加这两个属性，如下所示：

<use href="#symbol" xlink:href="#symbol" />

但请确保将xmlns:xlink="http://www.w3.org/1999/xlink"name 属性添加到父 svg 中。