SVG 文本未显示在 html 文件中 [重复]答案

【问题标题】：SVG text doesn't show up in html file [duplicate]SVG 文本未显示在 html 文件中 [重复]
【发布时间】：2020-06-21 05:43:21
【问题描述】：

我使用 Figma 来创建一些动画文本 -> 右键单击 -> 复制为 SVG 并插入到 html 文件中，但是当我刷新网页时，文本不显示，只是图像下方的白色条纹已经在 html 文件中。请你帮助我好吗？这太令人沮丧了。

现在，SVG 动画的代码非常长，而且充满了数字，所以我会为您简单介绍一下

@import './birds-animation';
body {
    position: relative;
    height: 100vh;
    width: 100vw;
    padding: 0;
    margin: 0;
}

<!DOCTYPE html>
 <html>
    <head>
     <title>icy-blues</title>
     <link rel="stylesheet" type="text/css" href="website1.css">
     <meta charset="UTF-8"> 
        <meta name="description" content="stufffff">
        <meta name="keywords" content="stuff2">
        <meta name="author" content="Ray">
    </head>

    <body>
        <div class="birds-container">
	
            <div class="bird-container bird-container--one">
                <div class="bird bird--one"></div>
            </div>
            
            <div class="bird-container bird-container--two">
                <div class="bird bird--two"></div>
            </div>
            
            <div class="bird-container bird-container--three">
                <div class="bird bird--three"></div>
            </div>
            
            <div class="bird-container bird-container--four">
                <div class="bird bird--four"></div>
            </div>
            
        </div>

        <svg width="850" height="118" viewBox="0 0 850 118" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g filter="url(#filter0_b)">
            <path d="numbersAndLetters" fill="#004756"/>
            then more of these path elements
            </g>
            <defs>
            <filter id="filter0_b" x="-4" y="-4" width="857.902" height="125.083" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
            <feGaussianBlur in="BackgroundImage" stdDeviation="2"/>
            <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
            </filter>
            </defs>
            </svg>
            
       
         
     </body>


 </html>

【问题讨论】：

Sooooo，只是几件事...content="width=device-width> 缺少右引号，并且需要这些“数字和字母”来绘制路径数据几何图形以查看实际的 SVG，所以我们不确定我们要查看的内容以确认其是否符合视觉预期。
感谢您的回答。我知道它们是必需的，但它太长了，我什至不确定我是否可以在这里发布它，我只是想给你一个粗略的想法，但我现在会尝试把它。我刚刚尝试过，但它不会让我，因为它有 382488 个字符

标签： html css animation svg

【解决方案1】：

这个之前的 SO 帖子有同样的问题： https://stackoverflow.com/a/57532709/2544629

解决办法是替换

<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImage" stdDeviation="2"/>

与

<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/>

Figma 似乎错误地导出了这个过滤器链。我有同样的问题。

【讨论】：