图标（svg文档）缩放不正确（？）应用高度和宽度时根据Css样式

Question

我正在处理一个奇怪的图标行为。

当我尝试将svg文档包装在div标签中时，给出一些宽度和高度样式（例如35x35）的图标非常小。实际上，宽度和高度应用于svg标签，但真实图像被包裹在“路径”标签中，并且非常小（4x4像素）。

为了在一些合理的尺寸上查看图标，我必须给出一些非常大的值，根据图标视图框，195x195px。但是通过这种方式，我有一个巨大的DIV容器，图标更小。

我对图形和图标没有太多经验，所以请告诉我：这个图标代码是错误的，还是我错误地应用了样式？

此外：我如何将它包装在Div中，以便以35x35的尺寸显示Svg容器以及图像？

下面是代码。您可以看到Svg容器比包含图像的路径大，但是更改他的值除了更小，不可见的图标之外，什么也没做。

html prettyprint-override"><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>

Answer 1

这是 svg 格式的基本结构。viewBox就像一个窗口，通过它可以查看整个svg中的绘图。

在你的情况下，你有一个巨大的视图框，可以捕获从0，0到195，195的所有内容，而你里面的实际绘图只是其中的一小部分。

正如评论员所说，您可以调整viewBox以仅针对绘图区域，也可以增加绘图本身。

请参阅我在此处附加的代码片段。在本例中，我删除了所有似乎不必要的filter和clipPath，以及SVG的高度和宽度，这些可以由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>