SVG文本不显示：CSS结合SVG实现头像首字无法显示求助

问题根源 #

你遇到的文本不显示问题，主要来自两个原因：

• 引号冲突：style属性里用单引号包裹url()内容，而SVG代码本身也用了单引号（比如width='150'），浏览器会提前截断字符串，导致SVG解析失败。
• 语法不规范：直接把SVG代码塞进url()不符合CSS语法，需要将SVG转为data URI格式，或者换用更简单的内联SVG方式。

推荐解决方案（内联SVG，无需转码） #

直接把SVG作为头像div的子元素，操作更直观，适合非专业开发者：

<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; border: 5px solid #ffffff; border-radius: 120px; float: left; margin-top: -60px; margin-left: 30px;">
        <svg width="100%" height="100%" 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>
    </div>
</div>

可选方案（转成Data URI） #

如果一定要用背景图方式，需要把SVG转成data:image/svg+xml格式，同时转义特殊字符：

<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('data:image/svg+xml,%3Csvg%20width%3D%22150%22%20height%3D%22150%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23868d9b%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22middle%22%20text-anchor%3D%22middle%22%20fill%3D%22%23ffffff%22%20font-family%3D%22Arial%22%20font-size%3D%2260%22%20font-weight%3D%22bold%22%3EBIO%3C%2Ftext%3E%3C%2Fsvg%3E'); 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>

说明 #

• 内联SVG方案更易维护，后续修改首字母或样式直接改SVG内容即可。
• Data URI方案需要对SVG代码进行URL转义，你可以用在线工具自动生成转码后的内容，避免手动出错。

内容的提问来源于stack exchange，提问作者Sammy