應用高度和寬度時，圖示（svg檔案）無法根據Css樣式正確縮放（？）

我正在處理一個奇怪的圖示行為。

當我嘗試在 div 標簽中包裝 svg 檔案時，給出一些寬度和高度樣式（例如 35x35）圖示非常小。實際上，寬度和高度應用于 svg 標簽，但真實影像被包裹在“路徑”標簽中，并且非常小（4x4 像素）。

為了以一些合理的尺寸查看圖示，我必須根據圖示視圖框給出一些相當大的值，195x195px。但這樣我就有了一個帶有較小圖示的巨大 DIV 容器。

我對圖形和圖示沒有太多經驗，所以請告訴我：這個圖示代碼是錯誤的，還是我錯誤地應用了樣式？

此外：我如何將它包裝在 Div 中以便讓 Svg 容器與影像一起以 35x35 顯示？

這是代碼。您可以看到 Svg 容器比包含影像的路徑大，但更改他的值除了更小、不可見的圖示之外什么也沒有。

<svg width='195' height='195' viewBox='0 0 195 195' fill='none' xmlns='http://www.w3.org/2000/svg'>
  <g clip-path='url(#clip0_1970_18261)' filter='url(#filter0_d_1970_18261)'>
    <path
      d='M114.116 75.9624L99.0451 60.8921C98.1778 60.0242 96.7701 60.0242 95.9014 60.8921L92.7722 64.0219L96.742 67.9917C97.6648 67.6802 98.7225 67.8891 99.4577 68.6244C100.197 69.3643 100.404 70.431 100.085 71.3569L103.911 75.1831C104.837 74.864 105.905 75.0701 106.644 75.8106C107.677 76.8434 107.677 78.5176 106.644 79.551C105.61 80.5845 103.936 80.5845 102.902 79.551C102.125 78.7733 101.933 77.6317 102.327 76.6741L98.7588 73.1063L98.7583 82.4964C99.0104 82.6208 99.248 82.7871 99.458 82.9963C100.491 84.029 100.491 85.7028 99.458 86.7377C98.4247 87.7705 96.7499 87.7705 95.7177 86.7377C94.6846 85.703 94.6846 84.0293 95.7177 82.9963C95.9731 82.7411 96.2684 82.5484 96.5836 82.4193V72.9422C96.2684 72.8132 95.9736 72.6218 95.7177 72.365C94.9351 71.583 94.7467 70.4345 95.1481 69.4731L91.2344 65.5594L80.9006 75.8926C80.0325 76.7613 80.0325 78.169 80.9006 79.0372L95.9717 94.1074C96.8396 94.9753 98.2467 94.9753 99.1159 94.1074L114.116 79.1072C114.984 78.2387 114.984 76.8303 114.116 75.9624V75.9624Z'
      fill='#222426'
    />
  </g>
  <defs>
    <filter
      id='filter0_d_1970_18261'
      x='0.00830078'
      y='0'
      width='195'
      height='195'
      filterUnits='userSpaceOnUse'
      color-interpolation-filters='sRGB'
    >
      <feFlood flood-opacity='0' result='BackgroundImageFix' />
      <feColorMatrix
        in='SourceAlpha'
        type='matrix'
        values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
        result='hardAlpha'
      />
      <feOffset dy='20' />
      <feGaussianBlur stdDeviation='40' />
      <feColorMatrix
        type='matrix'
        values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0'
      />
      <feBlend
        mode='normal'
        in2='BackgroundImageFix'
        result='effect1_dropShadow_1970_18261'
      />
      <feBlend
        mode='normal'
        in='SourceGraphic'
        in2='effect1_dropShadow_1970_18261'
        result='shape'
      />
    </filter>
    <clipPath id='clip0_1970_18261'>
      <rect
        width='35'
        height='35'
        fill='white'
        transform='translate(80.0083 60)'
      />
    </clipPath>
  </defs>
</svg>

uj5u.com熱心網友回復：

TL;博士。viewBox定義容器。path在里面繪制圖形。

svg它是格式的基本結構。viewBox就像一個視窗，通過它你可以查看整體里面的圖紙svg。

在你的情況下，你有一個巨大的viewBox，可以捕捉到一切0,0，195,195而你在里面的實際繪圖只是它的一小部分。

正如評論者所說，您可以將 調整viewBox為僅針對繪圖區域，或者增加繪圖本身。

請參閱我在此處附加的代碼片段。在這個例子中，我洗掉了所有filter和clipPath因為它們似乎沒有必要，以及 SVG 的height和width可以更好地由 CSS 控制。嘗試單擊按鈕來調整圖形的大小。

function handleResize(e) {
  const size = e.target.dataset.size;
  icon.setAttribute("height", size);
  icon.setAttribute("width", size);
}
const icon = document.querySelector('svg#icon');

document.querySelectorAll('button').forEach(btn => btn.addEventListener('click', handleResize));

<button data-size="195">195px</button>
<button data-size="64">64px</button>
<button data-size="32">32px</button>

<svg
  viewBox='0 0 195 195'
  fill='none'
  xmlns='http://www.w3.org/2000/svg'
  id="icon"
>
  <g style="transform: scale(5.6) translateY(20px); transform-origin: center;">
    <path
      d='M114.116 75.9624L99.0451 60.8921C98.1778 60.0242 96.7701 60.0242 95.9014 60.8921L92.7722 64.0219L96.742 67.9917C97.6648 67.6802 98.7225 67.8891 99.4577 68.6244C100.197 69.3643 100.404 70.431 100.085 71.3569L103.911 75.1831C104.837 74.864 105.905 75.0701 106.644 75.8106C107.677 76.8434 107.677 78.5176 106.644 79.551C105.61 80.5845 103.936 80.5845 102.902 79.551C102.125 78.7733 101.933 77.6317 102.327 76.6741L98.7588 73.1063L98.7583 82.4964C99.0104 82.6208 99.248 82.7871 99.458 82.9963C100.491 84.029 100.491 85.7028 99.458 86.7377C98.4247 87.7705 96.7499 87.7705 95.7177 86.7377C94.6846 85.703 94.6846 84.0293 95.7177 82.9963C95.9731 82.7411 96.2684 82.5484 96.5836 82.4193V72.9422C96.2684 72.8132 95.9736 72.6218 95.7177 72.365C94.9351 71.583 94.7467 70.4345 95.1481 69.4731L91.2344 65.5594L80.9006 75.8926C80.0325 76.7613 80.0325 78.169 80.9006 79.0372L95.9717 94.1074C96.8396 94.9753 98.2467 94.9753 99.1159 94.1074L114.116 79.1072C114.984 78.2387 114.984 76.8303 114.116 75.9624V75.9624Z'
      fill='#222426'
    />
  </g>
</svg>

標籤：javascript html css svg

上一篇：給定格式的兩級物件

下一篇：不經驗證取消表格