如何向下svg元素？-有解無憂

我正在做一個專案，目前我遇到了一個問題。

這是我的標記：

<a href="#">Here is a link icon.
    <svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'>
        <path d='M12.2068 1.79276C10.2975 -0.116585 7.2018 -0.116585 5.29246 1.79276L4.64288 2.44234C4.25236 2.83286 4.25236 3.46603 4.64288 3.85655C5.03341 4.24707 5.66657 4.24707 6.0571 3.85655L6.70667 3.20698C7.83497 2.07868 9.6643 2.07868 10.7926 3.20698C11.9209 4.33528 11.9209 6.16461 10.7926 7.29291L10.1425 7.94304C9.75195 8.33357 9.75194 8.96673 10.1425 9.35726C10.533 9.74778 11.1662 9.74778 11.5567 9.35726L12.2068 8.70712C14.1162 6.79778 14.1162 3.70211 12.2068 1.79276Z' fill='#076aff'/>
        <path d='M3.85726 6.05638C4.24779 5.66586 4.24779 5.03269 3.85726 4.64217C3.46674 4.25165 2.83357 4.25165 2.44305 4.64217L1.79236 5.29286C-0.116985 7.2022 -0.116985 10.2979 1.79236 12.2072C3.70171 14.1166 6.79738 14.1166 8.70672 12.2072L9.35713 11.5568C9.74765 11.1663 9.74765 10.5331 9.35713 10.1426C8.9666 9.75207 8.33344 9.75207 7.94291 10.1426L7.29251 10.793C6.16421 11.9213 4.33488 11.9213 3.20658 10.793C2.07828 9.6647 2.07828 7.83537 3.20658 6.70707L3.85726 6.05638Z' fill='#076aff'/>
        <path d='M8.20674 7.2071C8.59727 6.81658 8.59727 6.18341 8.20674 5.79289C7.81622 5.40237 7.18305 5.40237 6.79253 5.79289L5.73187 6.85355C5.34134 7.24408 5.34134 7.87724 5.73187 8.26776C6.12239 8.65829 6.75556 8.65829 7.14608 8.26776L8.20674 7.2071Z' fill='#076aff'/>   
    </svg>
</a>

問題是svg圖示比我預期的要高一點，所以我想向下svg向下2 to 3 px而不改變它的大小但改變svg`s位置。我怎樣才能實作它？

uj5u.com熱心網友回復：

嘗試使用flex。在這種情況下，您可以省略使用position: absolute; 但可以在此塊中對齊您的元素。

.custom-link {
  display: inline-flex;
  align-items: center; /* align content vertically */
  column-gap: 0.25rem; /* add gap between content items */
}

<p>Before using flex:</p>
<a href="#">Here is a link icon.
  <svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'>
    <path d='M12.2068 1.79276C10.2975 -0.116585 7.2018 -0.116585 5.29246 1.79276L4.64288 2.44234C4.25236 2.83286 4.25236 3.46603 4.64288 3.85655C5.03341 4.24707 5.66657 4.24707 6.0571 3.85655L6.70667 3.20698C7.83497 2.07868 9.6643 2.07868 10.7926 3.20698C11.9209 4.33528 11.9209 6.16461 10.7926 7.29291L10.1425 7.94304C9.75195 8.33357 9.75194 8.96673 10.1425 9.35726C10.533 9.74778 11.1662 9.74778 11.5567 9.35726L12.2068 8.70712C14.1162 6.79778 14.1162 3.70211 12.2068 1.79276Z' fill='#076aff'/>
    <path d='M3.85726 6.05638C4.24779 5.66586 4.24779 5.03269 3.85726 4.64217C3.46674 4.25165 2.83357 4.25165 2.44305 4.64217L1.79236 5.29286C-0.116985 7.2022 -0.116985 10.2979 1.79236 12.2072C3.70171 14.1166 6.79738 14.1166 8.70672 12.2072L9.35713 11.5568C9.74765 11.1663 9.74765 10.5331 9.35713 10.1426C8.9666 9.75207 8.33344 9.75207 7.94291 10.1426L7.29251 10.793C6.16421 11.9213 4.33488 11.9213 3.20658 10.793C2.07828 9.6647 2.07828 7.83537 3.20658 6.70707L3.85726 6.05638Z' fill='#076aff'/>
    <path d='M8.20674 7.2071C8.59727 6.81658 8.59727 6.18341 8.20674 5.79289C7.81622 5.40237 7.18305 5.40237 6.79253 5.79289L5.73187 6.85355C5.34134 7.24408 5.34134 7.87724 5.73187 8.26776C6.12239 8.65829 6.75556 8.65829 7.14608 8.26776L8.20674 7.2071Z' fill='#076aff'/>   
  </svg>
</a>

<p>With using flex:</p>
<a class="custom-link" href="#">Here is a link icon.
  <svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'>
    <path d='M12.2068 1.79276C10.2975 -0.116585 7.2018 -0.116585 5.29246 1.79276L4.64288 2.44234C4.25236 2.83286 4.25236 3.46603 4.64288 3.85655C5.03341 4.24707 5.66657 4.24707 6.0571 3.85655L6.70667 3.20698C7.83497 2.07868 9.6643 2.07868 10.7926 3.20698C11.9209 4.33528 11.9209 6.16461 10.7926 7.29291L10.1425 7.94304C9.75195 8.33357 9.75194 8.96673 10.1425 9.35726C10.533 9.74778 11.1662 9.74778 11.5567 9.35726L12.2068 8.70712C14.1162 6.79778 14.1162 3.70211 12.2068 1.79276Z' fill='#076aff'/>
    <path d='M3.85726 6.05638C4.24779 5.66586 4.24779 5.03269 3.85726 4.64217C3.46674 4.25165 2.83357 4.25165 2.44305 4.64217L1.79236 5.29286C-0.116985 7.2022 -0.116985 10.2979 1.79236 12.2072C3.70171 14.1166 6.79738 14.1166 8.70672 12.2072L9.35713 11.5568C9.74765 11.1663 9.74765 10.5331 9.35713 10.1426C8.9666 9.75207 8.33344 9.75207 7.94291 10.1426L7.29251 10.793C6.16421 11.9213 4.33488 11.9213 3.20658 10.793C2.07828 9.6647 2.07828 7.83537 3.20658 6.70707L3.85726 6.05638Z' fill='#076aff'/>
    <path d='M8.20674 7.2071C8.59727 6.81658 8.59727 6.18341 8.20674 5.79289C7.81622 5.40237 7.18305 5.40237 6.79253 5.79289L5.73187 6.85355C5.34134 7.24408 5.34134 7.87724 5.73187 8.26776C6.12239 8.65829 6.75556 8.65829 7.14608 8.26776L8.20674 7.2071Z' fill='#076aff'/>   
  </svg>
</a>

uj5u.com熱心網友回復：

使用向下箭頭的 svg 代碼，如果要更改 svg 代碼路徑的顏色，請使用 atter（填充）和（寬度）。

<div class="down-arrow">
  <svg xmlns="http://www.w3.org/2000/svg" fill="#000" width="30" viewBox="0 0 384 512"><path d="M374.6 310.6l-160 160C208.4 476.9 200.2 480 192 480s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 370.8V64c0-17.69 14.33-31.1 31.1-31.1S224 46.31 224 64v306.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0S387.1 298.1 374.6 310.6z"/></svg>
</div>

其他向下箭頭::

<svg xmlns="http://www.w3.org/2000/svg" fill="#000" width="25" viewBox="0 0 384 512"><path d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>

uj5u.com熱心網友回復：

position:relative并且負 y-offset viabottom:-0.1em應該可以正常作業。

.svg-inline{
  display:inline-block;
  position:relative;
  /* add a baseline y offset */
  bottom:-0.1em;
  /* adjust size if needed */
  font-size:0.85em;
  /* icon will scale along with the parent's font-size */
  height: 1em;
  margin-left:0.2em;
}

與您相反，vertical-align:-0.1em bottom:-0.1em不會引入任何額外的底部邊距，因為它是相對定位的。

由于您希望 svg 圖示的行為類似于圖示字體字符/字形，因此我還建議進行以下優化：

洗掉寬度和高度屬性，但保留您的視圖框，您可以相對于鏈接的字體大小縮放圖示
將您的圖示包裝在符號元素中

洗掉與路徑相關的填充屬性并添加fill="currentColor"到您的符號 - 這樣您就可以輕松地通過 css 設定圖示顏色

<svg class="iconAsset" style="display:none" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" >
<symbol id="icon-link" viewBox="0 0 14 14" fill="currentColor">
  <path d="M12.2 1.8c-1.9-1.9-5-1.9-6.9 0l-0.7 0.6c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1.1 0.4 1.5 0l0.6-0.7c1.1-1.1 3-1.1 4.1 0c1.1 1.1 1.1 3 0 4.1l-0.7 0.7c-0.4 0.3-0.4 1 0 1.4c0.4 0.4 1.1 0.4 1.4 0l0.7-0.7c1.9-1.9 1.9-5 0-6.9z M3.9 6.1c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.9 1.9-1.9 5 0 7c1.9 1.9 5 1.9 6.9 0l0.7-0.7c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.1 1.2-2.9 1.2-4.1 0c-1.1-1.1-1.1-2.9 0-4l0.7-0.7z M8.2 7.2c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-1.1 1c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1 0.4 1.4 0l1.1-1.1z" />
</symbol>
</svg>

示例 1：回應式行內圖示

顯示代碼片段

a{
word-break: break-all;
}

.custom-link{
    display:inline-block;
}

.svg-inline{
  display:inline-block;
  position:relative;
  /* add a baseline y offset */
  bottom:-0.1em;
  /* adjust size if needed */
  font-size:0.85em;
  /* icon will scale along with the parent's font-size */
  height: 1em;
  color: #076aff;
  margin-left:0.2em;
}

/** not recommended: will introduce bottom margins **/
.svg-inline-vertical-align{
  position:static;
  vertical-align:-0.75em;
}


/** if icon have a square 1/1 aspect ratio **/
.svg-inline-square{
  width: 1em;
}

<style>
  body{
  font-size:2vw;
  font-family: 'Segoe UI', sans-serif;
  transition:0.3s;
}

a{
  text-decoration-color: #076aff;
  text-decoration-color: #ccc;
  color:inherit;
  font-weight:bold;
}

.layout{
  width:50vw;
  border:1px solid #ccc;
  position:relative;
  margin: 0 auto;
  overflow:auto;
  resize: both;
}
</style>

<svg class="iconAsset" style="display:none" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" >
  <symbol id="icon-link" viewBox="0 0 14 14" fill="currentColor">
    <path d="M12.2 1.8c-1.9-1.9-5-1.9-6.9 0l-0.7 0.6c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1.1 0.4 1.5 0l0.6-0.7c1.1-1.1 3-1.1 4.1 0c1.1 1.1 1.1 3 0 4.1l-0.7 0.7c-0.4 0.3-0.4 1 0 1.4c0.4 0.4 1.1 0.4 1.4 0l0.7-0.7c1.9-1.9 1.9-5 0-6.9z M3.9 6.1c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.9 1.9-1.9 5 0 7c1.9 1.9 5 1.9 6.9 0l0.7-0.7c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.1 1.2-2.9 1.2-4.1 0c-1.1-1.1-1.1-2.9 0-4l0.7-0.7z M8.2 7.2c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-1.1 1c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1 0.4 1.4 0l1.1-1.1z" />
  </symbol>
</svg>

<div class="layout">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
  <a class="custom-link" href="#">
    link icon (position:relative)<svg class="svg-inline svg-inline-square" >
      <use href="#icon-link" />
    </svg>
   </a>
 Aenean massa. Cum sociis natoque penatibus et 
   <a class="custom-link" href="#">
    link icon (vertical-align)<svg class="svg-inline svg-inline-square svg-inline-vertical-align" >
      <use href="#icon-link" />
    </svg>
   </a>
 magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
  </p>
</div>

示例 2：多個不同大小的圖示

顯示代碼片段

let range = document.querySelector("#range");
range.addEventListener("change", function (e) {
  let val = e.currentTarget.value;
  document.body.style.fontSize = 1*val 'vw'
});

body{
  font-size:2vw;
  font-family: 'Segoe UI', sans-serif;
  transition:0.3s;
}

a{
  text-decoration-color: #076aff;
  text-decoration-color: #ccc;
  color:inherit;
  font-weight:bold;
}

.layout{
  width:50vw;
  border:1px solid #ccc;
  position:relative;
  margin: 0 auto;
  overflow:auto;
  resize: both;
}


.custom-link{
    display:inline-block;
}

.svg-inline{
  display:inline-block;
  font-size:0.85em;
  height: 1em;
  position:relative;
  bottom:-0.1em;
  color: #076aff;
  margin-left:0.2em;
}
.svg-inline-square{
  width: 1em;
}

<p style="text-align:center; font-size:12px;">Font size:<input type="range" value="2" id="range" min="1" max="2" step="0.1"></p>


<svg class="iconAsset" style="display:none" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" >
  <symbol id="icon-link" viewBox="0 0 14 14" fill="currentColor">
    <path d="M12.2 1.8c-1.9-1.9-5-1.9-6.9 0l-0.7 0.6c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1.1 0.4 1.5 0l0.6-0.7c1.1-1.1 3-1.1 4.1 0c1.1 1.1 1.1 3 0 4.1l-0.7 0.7c-0.4 0.3-0.4 1 0 1.4c0.4 0.4 1.1 0.4 1.4 0l0.7-0.7c1.9-1.9 1.9-5 0-6.9z M3.9 6.1c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.9 1.9-1.9 5 0 7c1.9 1.9 5 1.9 6.9 0l0.7-0.7c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-0.7 0.6c-1.1 1.2-2.9 1.2-4.1 0c-1.1-1.1-1.1-2.9 0-4l0.7-0.7z M8.2 7.2c0.4-0.4 0.4-1 0-1.4c-0.4-0.4-1-0.4-1.4 0l-1.1 1c-0.4 0.4-0.4 1.1 0 1.5c0.4 0.4 1 0.4 1.4 0l1.1-1.1z" />
  </symbol>
  
<symbol  id="icon-comments" viewBox="0 0 640 512" fill="currentColor">
    <path d="M208 0C322.9 0 416 78.8 416 176C416 273.2 322.9 352 208 352C189.3 352 171.2 349.7 153.9 345.8C123.3 364.8 79.13 384 24.95 384C14.97 384 5.93 378.1 2.018 368.9C-1.896 359.7-.0074 349.1 6.739 341.9C7.26 341.5 29.38 317.4 45.73 285.9C17.18 255.8 0 217.6 0 176C0 78.8 93.13 0 208 0zM164.6 298.1C179.2 302.3 193.8 304 208 304C296.2 304 368 246.6 368 176C368 105.4 296.2 48 208 48C119.8 48 48 105.4 48 176C48 211.2 65.71 237.2 80.57 252.9L104.1 277.8L88.31 308.1C84.74 314.1 80.73 321.9 76.55 328.5C94.26 323.4 111.7 315.5 128.7 304.1L145.4 294.6L164.6 298.1zM441.6 128.2C552 132.4 640 209.5 640 304C640 345.6 622.8 383.8 594.3 413.9C610.6 445.4 632.7 469.5 633.3 469.9C640 477.1 641.9 487.7 637.1 496.9C634.1 506.1 625 512 615 512C560.9 512 516.7 492.8 486.1 473.8C468.8 477.7 450.7 480 432 480C350 480 279.1 439.8 245.2 381.5C262.5 379.2 279.1 375.3 294.9 369.9C322.9 407.1 373.9 432 432 432C446.2 432 460.8 430.3 475.4 426.1L494.6 422.6L511.3 432.1C528.3 443.5 545.7 451.4 563.5 456.5C559.3 449.9 555.3 442.1 551.7 436.1L535.9 405.8L559.4 380.9C574.3 365.3 592 339.2 592 304C592 237.7 528.7 183.1 447.1 176.6L448 176C448 159.5 445.8 143.5 441.6 128.2H441.6z" />
  </symbol>
  
</svg>

<div class="layout">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
  <a class="custom-link" href="#">
    link icon<svg class="svg-inline svg-inline-square" >
      <use href="#icon-link" />
    </svg>
   </a>
 Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
  <a class="custom-link" href="#">link icon<svg class="svg-inline" viewBox="0 0 640 512" style="font-size:0.95em">
      <use href="#icon-comments" />
    </svg>
   </a> 
 ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate</p>
</div>

<p style="text-align:center; font-size:12px;">resize</p>

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

標籤：html css svg

上一篇：如何縮放SVG以適應div

下一篇：如何在兩個元素之間的ReactJs中進行svg變形