svg 上的背景大小答案

【问题标题】：background size on a svgsvg 上的背景大小
【发布时间】：2022-01-03 17:38:49
【问题描述】：

今天想使用 background-size 属性在 svg 上设置背景的大小，但没有成功，因为背景不是图像，而是普通颜色 (#ecf2f8)

这是我想做的：

这就是我所做的：

这是我的代码：

#svg-social {
      position: absolute;
      right: 50px;
      bottom: 45px;
      background-color: #ecf2f8;
      border-radius: 100px;
    }

<p id="main-text">
      Ever been in a room and felt like something was missing?<br> Perhaps 
      it felt slightly bare and uninviting. I’ve got some<br> simple tips 
      to help you make any room feel complete.</p>
      <div id="author">
        <img src="/images/avatar-michelle.jpg" alt="Michelle Appleton avatar" id="avatar">
        <h5 id="name">Michelle Appleton</h5>
        <p id="date">28 Jun 2020</p>
      </div>
    
      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" id="svg-social">
    
    
        <path fill="#6E8098"
          d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
      </svg>
      
      <div id="socials">
        <div id="triangle"></div>
      </div>
    </div>

祝你有美好的一天！

【问题讨论】：

您能否发布所有代码，包括生成 SVG 的 html 以使您的代码可重现（我们可以运行它并自行检查）？
@RyanMillares 完成
我会为 svg 元素使用 viewBox，例如 viewBox="-5 -5 25 25" 。如果您选择 viewBox 解决方案，请删除 svg 元素的高度。您也可以选择不同的宽度。请阅读更多关于viewBox attribute

标签： html css svg

【解决方案1】：

尝试使用padding 增加元素周围背景的大小：

#svg-social {
  position: absolute;
  right: 50px;
  bottom: 45px;
  background-color: #ecf2f8;
  border-radius: 100px;
  padding: 10px;
}

您选择的px 值取决于您想要什么，只需使用不同的值，看看它是否能得到您想要的输出。

在 CSS 中使用填充的示例代码 sn-p：

#svg-social {
  position: absolute;
  right: 50px;
  bottom: 45px;
  background-color: #ecf2f8;
  border-radius: 100px;
  padding: 10px;
}

<html>
<head>
<title>while</title>
 </head>

<body>

<p id="main-text">
  Ever been in a room and felt like something was missing?<br> Perhaps 
  it felt slightly bare and uninviting. I’ve got some<br> simple tips 
  to help you make any room feel complete.</p>
  <div id="author">
    <img src="/images/avatar-michelle.jpg" alt="Michelle Appleton avatar" id="avatar">
    <h5 id="name">Michelle Appleton</h5>
    <p id="date">28 Jun 2020</p>
  </div>

  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" id="svg-social">


    <path fill="#6E8098"
      d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
  </svg>
  
  <div id="socials">
    <div id="triangle"></div>
  </div>
</div>
</body>
</html>

html-css-js sn-p 代码：Code

【讨论】：

对不起，没用，增加了背景，但现在不显示图标，就像一个圆圈
@T69 很奇怪，它适用于代码 sn-p 以及 html-css-js.com。您是否删除了其他任何内容？
我复制并粘贴了你的代码
@T69 如果您从复制/粘贴的代码中删除了 padding 字段会怎样？
什么意思？现在我删除了填充，显然它像发布问题之前一样回来了

【解决方案2】：

您可以使用padding 来调整图标的背景大小。您还可以使用 transform: scale(1); 调整 SVG 图标的大小

#svg-social {
      position: absolute;
      right: 50px;
      bottom: 45px;
      background-color: #ecf2f8;
      border-radius: 100px;
      padding: .5em; /* You could also use px */
      transform: scale(1.5); /*Resize/scale the SVG*/
    }

<p id="main-text">
      Ever been in a room and felt like something was missing?<br> Perhaps 
      it felt slightly bare and uninviting. I’ve got some<br> simple tips 
      to help you make any room feel complete.</p>
      <div id="author">
        <img src="/images/avatar-michelle.jpg" alt="Michelle Appleton avatar" id="avatar">
        <h5 id="name">Michelle Appleton</h5>
        <p id="date">28 Jun 2020</p>
      </div>
    
      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" id="svg-social">
    
    
        <path fill="#6E8098"
          d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
      </svg>
      
      <div id="socials">
        <div id="triangle"></div>
      </div>
    </div>

我在 CSS 中添加了 padding 和 transform:scale()，如果是你想要的输出，请检查 sn-p

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

你需要创建一个 div 并将背景添加到 div，因为我不知道为什么，使用 padding 属性时 svg 消失了，这里是代码：

  <div id="svg1">
<svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="15" height="13">
  <path fill="#6E8098"
    d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
</svg>
  </div>

 #svg1 {
  position: absolute;
  right: 50px;
  bottom: 45px;
  background-color: #ecf2f8;
  border-radius: 50px;
  padding: 10px;
  height: 30px;
  width: 30px;
}
 #arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* this will center the svg in the div horizontally and vertically */

【讨论】：