ReactJS\usvg:如何在Firefox中为SVG的文本元素导入自定义字体?

我在使用NextJs的网络服务器上,codesandbox.io 以及stackblitz.com 阻止我在他们的云界面上下载字体。我已经创建了一个Github repo,这样您就可以自己在本地测试代码了。链接如下: https://github.com/Hocoh/svg_font_firefox/blob/master/README.md

我将导入一个自定义字体,以便在Firefox中为SVG的文本元素使用,该文本元素将用作剪辑路径,以便在其上设置面板的动画 发现文本效果 . 为了简单起见,我在示例中只集成了一个面板,而在实际示例中有五个面板。当前呈现无法实现页面中的自定义字体。 要导入自定义字体,我已尝试:

• 在文本和文本范围中使用字体族属性,
• 使用内联样式,

如果我理解的很好,Firefox遵循SVG规范的严格实现,这就可以解释为什么我的代码在Google Chrome和Opera中工作得很好,比如说在严格的遵从性之上,只是简单的CSS和选择器,在Firefox中会失败。

如何在SVG文本的元素上显示自定义字体?

从“React”导入React;

导出默认值()=>(

 <svg 

    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink" 
    width="100%" height="100%"
    // viewBox="50% 50% 20% 20%"
>

    {/* define style in SVG scope */} 
    <defs>
        {/* work when importing external  stylesheet
             <style type="text/css"> 
                {` 
                   @import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
                `}
            </style>
        */}

        {/* fail on local font's importing*/}

        {/* fail using relative path
            <style type="text/css"> 
                {` 
                    @font-face{
                        font-family:AnuDaw;
                        src:
                            url("../font/Anud/AnuDaw.ttf") format("truetype"),
                            url("../font/Anud/AnuDaw.woff") format("woff"),
                            url("../font/Anud/AnuDaw.woff2") format("woff2"),
                            url("../font/Anud/AnuDaw.eot"),
                            url("../font/Anud/AnuDaw.eot?#iefix") format('embedded-opentype'),
                            url("../font/Anud/AnuDaw.svg")  format('svg');
                    }
                    text{
                        font-family: AnuDaw;
                        font-size:3em;
                    }
                `}
            </style>
        */}

        {/* fail using root path*/}
         <style type="text/css"> 
            {` 
                @font-face{
                    font-family:AnuDaw;
                    src:
                        url("../font/Anud/AnuDaw.ttf") format("truetype"),
                        url("../font/Anud/AnuDaw.woff") format("woff"),
                        url("../font/Anud/AnuDaw.woff2") format("woff2"),
                        url("../font/Anud/AnuDaw.eot"),
                        url("../font/Anud/AnuDaw.eot?#iefix") format('embedded-opentype'),
                        url("../font/Anud/AnuDaw.svg")  format('svg');
                }
                text{
                    font-family: AnuDaw;
                    font-size:3em;
                }
            `}
        </style>
    </defs>
    <defs> 
        <g  
            className="text_group"        
            id="panel_animation"
           // style={{fontFamily:"AnuDaw"}}
            y="0"

        >
             <text   
                    wordSpacing="-.45em"    
                    fontFamily="AnuDaw"
                >
                <tspan  x="0%" y="0%"  
                    dy="1.6em"   
                    >So</tspan> 
                <tspan  x="0%" y="-5%" 
                    dy="3em"  
                    fontFamily="AnuDaw">Food</tspan>
                </text> 

        </g>
    </defs> 

    <use
        width="100%" height="100%" 
        x="50%"
        xlinkHref="#panel_animation"                      
    /> 
</svg>    
  )