时间戳

首页 > 解决方案 > SVG 文本未显示在 html 文件中

html - SVG 文本未显示在 html 文件中

问题描述

我使用 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>

标签： htmlcssanimationsvg

解决方案

这个以前的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 似乎错误地导出了这个过滤器链。我遇到过同样的问题。

推荐阅读