html - 如何使用 CSS 调整 svg 的大小？

Question

我在这里找到了一个相关问题:How can I resize an SVG?

我想使用 CSS 调整 swg 中制作的箭头的大小。在相关问题中，目标是通过 HTML 指令实现的 (viewBox="0 0 32 32")

你有什么建议吗？

#DIV_1 {
    float: left;
    font-family: 'PT Sans Narrow';
    font-size: 13px;
    height: 33px;
    overflow-wrap: break-word;
    padding-right: 20px;
    padding-top: 8px;
    text-align: center;
    width: 50px;
    word-wrap: break-word;
    perspective-origin: 35px 20.5px;
    transform-origin: 35px 20.5px;
    font: normal normal normal normal 13px/normal 'PT Sans Narrow';
    padding: 8px 20px 0px 0px;
}/*#DIV_1*/

#svg_2 {
    font-family: 'PT Sans Narrow';
    font-size: 13px;
    height: 29px;
    overflow-wrap: break-word;
    overflow-x: hidden;
    overflow-y: hidden;
    text-align: center;
    width: 50px;
    word-wrap: break-word;
    perspective-origin: 25px 14.5px;
    transform-origin: 25px 14.5px;
    font: normal normal normal normal 13px/normal 'PT Sans Narrow';
    overflow: hidden;
}/*#svg_2*/

#path_3 {
    font-family: 'PT Sans Narrow';
    font-size: 13px;
    overflow-wrap: break-word;
    text-align: center;
    word-wrap: break-word;
    fill: rgb(25, 94, 2);
    font: normal normal normal normal 13px/normal 'PT Sans Narrow';
}/*#path_3*/

<div class="igc-textual-icon" id="DIV_1"><svg data-id="" height="29" width="50" version="1.1" xmlns="http://www.w3.org/2000/svg" id="svg_2">
    <path class="igc-table-scaledpath" fill="#195e02" d="M50,25C49.99999999999999,25.84,49.69333333333333,26.573333333333334,49.08,27.2C48.46666666666666,27.826666666666664,47.73333333333333,28.133333333333333,46.879999999999995,28.12C46.879999999999995,28.12,3.1399999999999935,28.12,3.1399999999999935,28.12C2.2999999999999936,28.119999999999997,1.56666666666666,27.813333333333333,0.9399999999999933,27.2C0.31333333333332647,26.586666666666662,0.006666666666659825,25.853333333333328,0.019999999999993245,25C0.033333333333326665,24.14666666666667,0.3399999999999933,23.413333333333334,0.9399999999999933,22.8C0.9399999999999933,22.8,22.819999999999993,0.9200000000000017,22.819999999999993,0.9200000000000017C23.433333333333326,0.3066666666666683,24.166666666666657,1.6653345369377348e-15,25.019999999999992,1.6653345369377348e-15C25.87333333333332,1.6653345369377348e-15,26.606666666666655,0.3066666666666683,27.21999999999999,0.9200000000000017C27.21999999999999,0.9200000000000017,49.099999999999994,22.8,49.099999999999994,22.8C49.713333333333324,23.413333333333334,50.019999999999996,24.14666666666667,50.019999999999996,25C50.019999999999996,25,50,25,50,25" id="path_3"></path>
</svg></div>

Answer 1

将此代码添加到 html 中的 svg preserveAspectRatio="xMinYMin meet" 并从中删除宽度和高度，之后您可以通过更改父 div 的宽度和高度来调整它的大小

这是一个例子。您可以在 css 中更改父 div 的宽度和高度，

example

html部分

<div class="igc-textual-icon" id="DIV_1"><svg data-id="" viewBox="0 0 56 56" preserveAspectRatio="xMinYMin meet" version="1.1" xmlns="http://www.w3.org/2000/svg" id="svg_2">
    <path class="igc-table-scaledpath" fill="#195e02" d="M50,25C49.99999999999999,25.84,49.69333333333333,26.573333333333334,49.08,27.2C48.46666666666666,27.826666666666664,47.73333333333333,28.133333333333333,46.879999999999995,28.12C46.879999999999995,28.12,3.1399999999999935,28.12,3.1399999999999935,28.12C2.2999999999999936,28.119999999999997,1.56666666666666,27.813333333333333,0.9399999999999933,27.2C0.31333333333332647,26.586666666666662,0.006666666666659825,25.853333333333328,0.019999999999993245,25C0.033333333333326665,24.14666666666667,0.3399999999999933,23.413333333333334,0.9399999999999933,22.8C0.9399999999999933,22.8,22.819999999999993,0.9200000000000017,22.819999999999993,0.9200000000000017C23.433333333333326,0.3066666666666683,24.166666666666657,1.6653345369377348e-15,25.019999999999992,1.6653345369377348e-15C25.87333333333332,1.6653345369377348e-15,26.606666666666655,0.3066666666666683,27.21999999999999,0.9200000000000017C27.21999999999999,0.9200000000000017,49.099999999999994,22.8,49.099999999999994,22.8C49.713333333333324,23.413333333333334,50.019999999999996,24.14666666666667,50.019999999999996,25C50.019999999999996,25,50,25,50,25" id="path_3"></path>
</svg></div>