代码之家 › 专栏 › 技术社区 › Sammy

SVG文本未显示

svg css html

Sammy · 技术社区 · 2 年前

我的CSS旨在将用户的首字母显示为他们的个人资料图片,然而,与SVG一起使用的样式并不显示文本。如果我将两个实例分开,我会看到文本。

.card_background_img {
    width: 100%;
    height: 150px;
    border-radius: 8px;
    background-color: #1B2149;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

<div style="width: 100%; height: 150px; background-color: #ffffff; margin: 0 auto; border-radius: 8px; margin-top: 5px; margin-bottom: 13%; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);">
                    <div class="card_background_img"></div>
                    <!--<div-->
                    <!--    style="width: 150px; height: 150px; background-color: #868d9b;background: url('');background-repeat: no-repeat;background-size: cover;background-position: center;border: 5px solid #ffffff;border-radius: 120px;float: left;margin-top: -60px;margin-left: 30px;">-->
                    <!--</div>-->
                    <div style="width: 150px; height: 150px; background-color: #868d9b; background: url('<svg width='150' height='150' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='#868d9b'/><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' fill='#ffffff' font-family='Arial' font-size='60' font-weight='bold'>BIO</text></svg>'); background-repeat: no-repeat; background-size: cover; background-position: center; border: 5px solid #ffffff; border-radius: 120px; float: left; margin-top: -60px; margin-left: 30px;">
</div>
                </div>

请帮忙,因为我觉得我的鼻子上少了什么东西,不知道是什么。前端不是我的面包和黄油,所以对我宽容一点。谢谢

1 回复 | 直到 2 年前

Jadefox10200 2 年前

你有svg作为背景,但你已经有了背景。我把它们分开,试了以下几种。它对我有效:

.card_background_img {
    width: 100%;
    height: 150px;
    border-radius: 8px;
    background-color: #1B2149;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

<div style="width: 100%; height: 150px; background-color: #ffffff; margin: 0 auto; border-radius: 8px; margin-top: 5px; margin-bottom: 13%; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);">
        <div class="card_background_img"></div> 
                    <!-- <div style="width: 150px; height: 150px; background-color: #868d9b;background: url('');background-repeat: no-repeat;background-size: cover;background-position: center;border: 5px solid #ffffff;border-radius: 120px;float: left;margin-top: -60px;margin-left: 30px;">
                    </div> -->                    
                    <div style="width: 150px; height: 150px; background-color: #868d9b; background-repeat: no-repeat; background-size: cover; background-position: center; border: 5px solid #ffeeff; border-radius: 120px; float: left; margin-top: -60px; margin-left: 30px;">

                    <svg width='150' height='150' xmlns='http://www.w3.org/2000/svg'>
                        <text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' fill='#ffeeff' font-family='Arial' font-size='60' font-weight='bold'>BIO</text>
                    </svg>
        </div>

    </div>