主页 / 问题 / 1178778
Accepted
word
Asked:2020-09-16 16:13:17 +0800 CST2020-09-16 16:13:17 +0800 CST

Svg 图标不是通过 background-image CSS 呈现的

  • 772

为什么通过 background-image CSS 添加的 svg 图标没有被渲染？

编码：

.icon-social{
    display: inline-block;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 1px solid black;
    vertical-align:middle;
}
.icon-social.big{
    width: 49px;
    height: 49px;
}
.icon-social i{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.icon-facebook i{
    background-image: url("data:image/svg+xml,%3Csvg id='Capa_1' enable-background='new 0 0 512 512' height='512' viewBox='0 0 512 512' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z'/%3E%3C/svg%3E");

}
<a href="#">
   <span class="icon-social icon-facebook big">
     <i></i>
   </span>
</a> <span>- не отображается svg</span>
<img src="data:image/svg+xml,%3Csvg id='Capa_1' enable-background='new 0 0 512 512' height='512' viewBox='0 0 512 512' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z'/%3E%3C/svg%3E" alt="">

添加：

<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z"/></svg>

链接到 JSFiddle

css

2 个回答

  1. Best Answer

    通过 插入 SVG 时background-image，您需要使用稍微不同的格式：

    // у вас используется encode и
// после декодирования получаеться
data:image/svg xml

// а нужно
data:image/svg+xml

// так же определенные атрибуты могут
// провоцировать данное поведение
// когда изображение вставляется
// через background-image
width='512'    
height='512'


    .icon-social {
  display: inline-block;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 1px solid black;
  vertical-align: middle;
}

.icon-social.big {
  width: 49px;
  height: 49px;
}

.icon-social i {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.icon-facebook i {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' id='Capa_1' enable-background='new 0 0 512 512'><path d='m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z'/></svg>");
}
    <a href="#">
  <span class="icon-social icon-facebook big">
     <i></i>
   </span>
</a>
<span>- не отображается svg</span>

    • 4

  2. @Vasiliy评论

    我认为属性width和height与变体通过background. 这是浏览器行为还是取决于您的粘贴方式？

    只需要澄清 - 在 SVG 内部或父容器中。

    1. 如果在标头中的 SVG 内部width并height没有指定，或者它们等于 100%，那么 SVG 将占据整个父容器。

    下面是一个具有相同 facebook 图标但具有不同父容器大小 32、49、64 像素的示例

    .min-icon-social{
 display: inline-block;
 width: 32px;
 height: 32px; 
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z'/%3E%3C/svg%3E");
}
.mid-icon-social{
 display: inline-block;
 width: 49px;
 height: 49px; 
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z'/%3E%3C/svg%3E");
} 
.big-icon-social{
 display: inline-block;
 width: 64px;
 height: 64px; 
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z'/%3E%3C/svg%3E");
}
    <a href="#">
   <span class="big-icon-social"></span> 
   <span class="mid-icon-social"></span>
   <span class="min-icon-social"></span>
</a>

    1. 如果图标的宽度和高度在 SVG 内部设置，则父容器中的图标将占用与其大小相等的空间。

    .min-icon-social{
 display: inline-block;
 width: 23px;
 height: 23px; 
 border: 1px solid black;
  vertical-align: middle;
  
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' width='23' height='23' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.mid-icon-social{
 display: inline-block;
 width: 49px;
 height: 49px; 
 border: 1px solid black;
  vertical-align: middle;
  
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' width='23' height='23' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.big-icon-social{
 display: inline-block;
 width: 64px;
 height: 64px; 
 border: 1px solid black;
  vertical-align: middle;
  
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' width='23' height='23' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m512 256c0-141.4-114.6-256-256-256s-256 114.6-256 256 114.6 256 256 256c1.5 0 3 0 4.5-.1v-199.2h-55v-64.1h55v-47.2c0-54.7 33.4-84.5 82.2-84.5 23.4 0 43.5 1.7 49.3 2.5v57.2h-33.6c-26.5 0-31.7 12.6-31.7 31.1v40.8h63.5l-8.3 64.1h-55.2v189.5c107-30.7 185.3-129.2 185.3-246.1z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
    <a href="#">
   <span class="big-icon-social">  </span> 
   <span class="mid-icon-social">  </span>
   <span class="min-icon-social">  </span>
</a>

    • 3

相关问题