svg上的背景大小-有解無憂

今天想使用該background-size屬性在 svg 上設定背景的大小，但它沒有用，因為背景不是影像，而是正常顏色 (#ecf2f8)

這是我想要做的： svg 上的背景大小

這是我所做的： svg 上的背景大小

這是我的代碼：

#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>

祝你今天過得愉快！

uj5u.com熱心網友回復：

嘗試使用padding增加元素周圍背景的大小：

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

px您選擇的值取決于您想要什么，只需使用不同的值，看看它是否能得到您想要的輸出。

在 CSS 中填充的示例代碼片段：

#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 代碼片段：代碼

uj5u.com熱心網友回復：

padding用于增加SVGIem在填充中使用的背景，但您也可以使用px. 您還可以增加SVGusing的大小transform: scale(1)。也可以使用比例值。我在下面提供了一個片段：

#svg-social {
      position: absolute;
      right: 50px;
      bottom: 45px;
      background-color: #ecf2f8;
      border-radius: 100px;
      padding: .5em; /*Use px if you want*/
      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>

我只在你的中添加了 2 行css，其余的是你提供的代碼。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/401876.html

標籤：html css svg

上一篇：inline-flex容器如何決定何時換行？[復制]

下一篇：如何將部分透明的div居中？