如何使用CSS调整svg大小？

我在这里找到一个相关的问题：How can I resize an SVG?如何使用CSS调整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>

来源

2015-04-01 Revious

这个代码添加到HTML preserveAspectRatio="xMinYMin meet"您的SVG也从中取出宽度和高度，之后，你可以通过

这里改变父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>

来源

2015-04-01 09:36:06

嗯..我不能使它工作。我已经解决了使用transform =“scale（0.5）”，你能修改我的代码片段来展示它应该如何工作吗？ – Revious 2015-04-01 09:44:35

我更新了答案，您可以看到示例 – 2015-04-01 10:16:14

亚伦忘了提及您的SVG还需要一个'viewBox'。 – 2015-04-01 10:44:24

如何使用CSS调整svg大小？

回答

相关问题