应用高度和宽度时，图标（svg 文档）未根据 Css 样式正确缩放（？）
Icon (svg document) not scalling properly (?) according to Css styles when applying height and width
我正在处理一个奇怪的图标行为。
当我尝试在 div 标签中包装 svg 文档时，给出一些宽度和高度样式 (e.x.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>
长话短说；博士。 viewBox 定义容器。 path在里面画图形。
这是svg格式的基本结构。 viewBox就像一个window，通过它可以看到里面的图纸整体svg。
在你的情况下，你有一个巨大的 viewBox 可以捕获从 0,0 到 195,195 的所有内容，而你内部的实际绘图只是其中的一小部分。
正如评论者所说，您可以将 viewBox 调整为仅针对绘图区域，或者增加绘图本身。
请参阅我在此处附加的代码片段。在这个例子中，我删除了所有 filter 和 clipPath，因为它们似乎是不必要的，以及 SVG 的 height 和 width 可以通过 [=41 更好地控制=].尝试单击按钮调整图形大小。
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>
我正在处理一个奇怪的图标行为。
当我尝试在 div 标签中包装 svg 文档时，给出一些宽度和高度样式 (e.x.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>
长话短说；博士。 viewBox 定义容器。 path在里面画图形。
这是svg格式的基本结构。 viewBox就像一个window，通过它可以看到里面的图纸整体svg。
在你的情况下，你有一个巨大的 viewBox 可以捕获从 0,0 到 195,195 的所有内容，而你内部的实际绘图只是其中的一小部分。
正如评论者所说，您可以将 viewBox 调整为仅针对绘图区域，或者增加绘图本身。
请参阅我在此处附加的代码片段。在这个例子中，我删除了所有 filter 和 clipPath，因为它们似乎是不必要的，以及 SVG 的 height 和 width 可以通过 [=41 更好地控制=].尝试单击按钮调整图形大小。
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>