Проблема, изменив размер SVG

Я ходил вокруг темы и мне не удается изменить размер SVG apropiadamente, я добавляю исходный код.

.st0{fill:#FE3D50;}
	.st1{fill:#51E4C2;}
	.st2{fill:#E5F9F4;}
	.st3{fill:#FFFFFF;}
	.st4{opacity:0.2;fill:#51E4C2;enable-background:new    ;}
	.st5{fill:#2283F6;}
	.st6{opacity:0.3;fill:#252528;enable-background:new    ;}
	.st7{fill:none;}
	.st8{fill:#F8E71C;}
	.st9{opacity:0.2;fill:#F8E71C;enable-background:new    ;}
	.st10{opacity:0.1;fill:#534741;enable-background:new    ;}
	.st11{fill:#534741;}
	.st12{opacity:0.2;fill:#DF71F5;enable-background:new    ;}
	.st13{opacity:0.2;fill:#534741;enable-background:new    ;}
	.st14{opacity:0.5;fill:#FFFFFF;enable-background:new    ;}
	.st15{fill:#DF71F5;}
	.st16{fill:#E4EFEC;}
	.st17{fill:#3ECCA6;}
	.st18{opacity:0.1;fill:#1F211E;enable-background:new    ;}
	.st19{opacity:0.1;fill:#51E4C2;enable-background:new    ;}
	.st20{opacity:0.1;fill:#DF71F5;enable-background:new    ;}
	.st21{fill:none;stroke:#534741;stroke-width:6;stroke-linecap:round;stroke-miterlimit:10;}
	.st22{fill:none;stroke:#FE3D50;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
	.st23{opacity:0.1;fill:#FE3D50;enable-background:new    ;}
	.st24{opacity:0.2;fill:#252528;enable-background:new    ;}
	.st25{opacity:0.2;fill:#2283F6;enable-background:new    ;}
	.st26{opacity:0.2;fill:#FFFFFF;enable-background:new    ;}
	.st27{opacity:0.2;fill:#FE3D50;enable-background:new    ;}
	.st28{fill:#F9EDED;}
	.st29{opacity:0.4;fill:#FE3D50;enable-background:new    ;}
	.st30{opacity:0.3;fill:#FFFFFF;enable-background:new    ;}
	.st31{opacity:0.1;fill:#2283F6;enable-background:new    ;}
	.st32{opacity:0.3;fill:#2283F6;enable-background:new    ;}
	.st33{fill:#F0F2F1;}
	.st34{fill:none;stroke:#E8EDEB;stroke-miterlimit:10;}
	.st35{fill:#E8EDEB;}
	.st36{fill:none;stroke:#F8E71C;stroke-miterlimit:10;}
	.st37{opacity:0.4;fill:#F8E71C;enable-background:new    ;}
	.st38{fill:none;stroke:#E23B53;stroke-miterlimit:10;}
	.st39{fill:none;stroke:#F8E71C;stroke-width:2;stroke-miterlimit:10;}
	.st40{fill:#2283F6;fill-opacity:0.3;}
	.st41{opacity:0.5;fill:#FE3D50;enable-background:new    ;}
	.st42{fill:#E2E6E8;}
	.st43{opacity:0.5;fill:#2283F6;enable-background:new    ;}
	.st44{opacity:0.3;fill:#51E4C2;enable-background:new    ;}
	.st45{fill:none;stroke:#F5F7F6;stroke-miterlimit:10;}
	.st46{opacity:0.4;fill:#51E4C2;enable-background:new    ;}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve" height="200px" viewBox="0 0 1600 1200" width="200px" style="enable-background:0 0 200px 200px;">
  <g style="">
	<circle class="st15" cx="683.7392" cy="268.5" r="80"></circle>
	<circle class="st1" cx="683.7392" cy="268.5" r="55.88454"></circle>
	<path class="st16" d="M738.06525,316.16577l-114.89941-11.27325c-1.0993-0.10785-1.90302-1.08646-1.79517-2.18573l7.85675-80.07739
		c0.10785-1.09929,1.08643-1.90302,2.18573-1.79515l114.89941,11.27324c1.09924,0.10786,1.90295,1.08644,1.7951,2.18573
		l-7.85669,80.07739C740.14313,315.46991,739.16455,316.27362,738.06525,316.16577z"></path>
	<path class="st3" d="M741.46472,310.73096H626.01361c-1.10455,0-2-0.89545-2-2v-80.4619c0-1.10457,0.89545-2,2-2h115.45111
		c1.10461,0,2,0.89543,2,2v80.4619C743.46472,309.83551,742.56934,310.73096,741.46472,310.73096z"></path>
	<polygon class="st17" points="683.7392,278.5 702.90662,259.33258 738.44812,294.87415 738.44812,305.73096 683.73914,305.73096 	
		"></polygon>
	<circle class="st9" cx="719.56879" cy="273.63794" r="14.30533"></circle>
	<circle class="st8" cx="719.56879" cy="273.63794" r="8.97336"></circle>
	<path class="st1" d="M629.01379,283.55862c2.86639-2.28229,35.72925-35.72925,35.72925-35.72925l58.04626,58.0463h-93.77551
		V283.55862z"></path>
	<ellipse class="st18" cx="648.32654" cy="277.74991" rx="6.47058" ry="3.81927"></ellipse>
	<rect x="647.61292" y="268.21634" class="st11" width="1.42719" height="9.53357"></rect>
	<circle class="st17" cx="648.32654" cy="264.46155" r="6.47058"></circle>
</g>
</svg>
1
задан 31.05.2019, 18:41
2 ответа

Если то, что ты хочешь, состоит в том, чтобы снимать место в мишени около изображения, ты нуждаешься в том, чтобы повторно вычислить стоимость признака viewBox. Чтобы знать стоимость, которую я должен использовать, я нуждаюсь в том, чтобы знать tamaГ±o и она posiciГіn ящика delimitadora (bounding box) группы, что он завертывает изображение:

  let elG = document.querySelector("g");
  let bb = elG.getBBox();
  console.log(bb);

mГ©todo getBBox() возвращает объект с нею posiciГіn (x, y) и tamaГ±o (width, height) ящика delimitadora. Я буду использовать эту стоимость для стоимости viewBox asГ-:

vievBox = "bb.x bb.y bb.width bb.height"

ты можешь делать Это в javascript или можешь делать это вручную округляя их nГєmeros в твой вкус.

Надеялся, что он Гєtil и что не приходите слишком много поздно.

// el grupo que envuelve la imagen
let elG = document.querySelector("g");
//saco en consola el valor de la caja delimitadora del grupo
console.log(elG.getBBox())
svg{border:1px solid}


.st0{fill:#FE3D50;}
	.st1{fill:#51E4C2;}
	.st2{fill:#E5F9F4;}
	.st3{fill:#FFFFFF;}
	.st4{opacity:0.2;fill:#51E4C2;enable-background:new    ;}
	.st5{fill:#2283F6;}
	.st6{opacity:0.3;fill:#252528;enable-background:new    ;}
	.st7{fill:none;}
	.st8{fill:#F8E71C;}
	.st9{opacity:0.2;fill:#F8E71C;enable-background:new    ;}
	.st10{opacity:0.1;fill:#534741;enable-background:new    ;}
	.st11{fill:#534741;}
	.st12{opacity:0.2;fill:#DF71F5;enable-background:new    ;}
	.st13{opacity:0.2;fill:#534741;enable-background:new    ;}
	.st14{opacity:0.5;fill:#FFFFFF;enable-background:new    ;}
	.st15{fill:#DF71F5;}
	.st16{fill:#E4EFEC;}
	.st17{fill:#3ECCA6;}
	.st18{opacity:0.1;fill:#1F211E;enable-background:new    ;}
	.st19{opacity:0.1;fill:#51E4C2;enable-background:new    ;}
	.st20{opacity:0.1;fill:#DF71F5;enable-background:new    ;}
	.st21{fill:none;stroke:#534741;stroke-width:6;stroke-linecap:round;stroke-miterlimit:10;}
	.st22{fill:none;stroke:#FE3D50;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
	.st23{opacity:0.1;fill:#FE3D50;enable-background:new    ;}
	.st24{opacity:0.2;fill:#252528;enable-background:new    ;}
	.st25{opacity:0.2;fill:#2283F6;enable-background:new    ;}
	.st26{opacity:0.2;fill:#FFFFFF;enable-background:new    ;}
	.st27{opacity:0.2;fill:#FE3D50;enable-background:new    ;}
	.st28{fill:#F9EDED;}
	.st29{opacity:0.4;fill:#FE3D50;enable-background:new    ;}
	.st30{opacity:0.3;fill:#FFFFFF;enable-background:new    ;}
	.st31{opacity:0.1;fill:#2283F6;enable-background:new    ;}
	.st32{opacity:0.3;fill:#2283F6;enable-background:new    ;}
	.st33{fill:#F0F2F1;}
	.st34{fill:none;stroke:#E8EDEB;stroke-miterlimit:10;}
	.st35{fill:#E8EDEB;}
	.st36{fill:none;stroke:#F8E71C;stroke-miterlimit:10;}
	.st37{opacity:0.4;fill:#F8E71C;enable-background:new    ;}
	.st38{fill:none;stroke:#E23B53;stroke-miterlimit:10;}
	.st39{fill:none;stroke:#F8E71C;stroke-width:2;stroke-miterlimit:10;}
	.st40{fill:#2283F6;fill-opacity:0.3;}
	.st41{opacity:0.5;fill:#FE3D50;enable-background:new    ;}
	.st42{fill:#E2E6E8;}
	.st43{opacity:0.5;fill:#2283F6;enable-background:new    ;}
	.st44{opacity:0.3;fill:#51E4C2;enable-background:new    ;}
	.st45{fill:none;stroke:#F5F7F6;stroke-miterlimit:10;}
	.st46{opacity:0.4;fill:#51E4C2;enable-background:new    ;}
<svg viewBox="603 188 162 162" width="200px" >
  <g>
	<circle class="st15" cx="683.7392" cy="268.5" r="80"></circle>
	<circle class="st1" cx="683.7392" cy="268.5" r="55.88454"></circle>
	<path class="st16" d="M738.06525,316.16577l-114.89941-11.27325c-1.0993-0.10785-1.90302-1.08646-1.79517-2.18573l7.85675-80.07739
		c0.10785-1.09929,1.08643-1.90302,2.18573-1.79515l114.89941,11.27324c1.09924,0.10786,1.90295,1.08644,1.7951,2.18573
		l-7.85669,80.07739C740.14313,315.46991,739.16455,316.27362,738.06525,316.16577z"></path>
	<path class="st3" d="M741.46472,310.73096H626.01361c-1.10455,0-2-0.89545-2-2v-80.4619c0-1.10457,0.89545-2,2-2h115.45111
		c1.10461,0,2,0.89543,2,2v80.4619C743.46472,309.83551,742.56934,310.73096,741.46472,310.73096z"></path>
	<polygon class="st17" points="683.7392,278.5 702.90662,259.33258 738.44812,294.87415 738.44812,305.73096 683.73914,305.73096 	
		"></polygon>
	<circle class="st9" cx="719.56879" cy="273.63794" r="14.30533"></circle>
	<circle class="st8" cx="719.56879" cy="273.63794" r="8.97336"></circle>
	<path class="st1" d="M629.01379,283.55862c2.86639-2.28229,35.72925-35.72925,35.72925-35.72925l58.04626,58.0463h-93.77551
		V283.55862z"></path>
	<ellipse class="st18" cx="648.32654" cy="277.74991" rx="6.47058" ry="3.81927"></ellipse>
	<rect x="647.61292" y="268.21634" class="st11" width="1.42719" height="9.53357"></rect>
	<circle class="st17" cx="648.32654" cy="264.46155" r="6.47058"></circle>
</g>
</svg>
1
ответ дан 02.12.2019, 05:24

Искренне я не знаю немного темы, но что-то, что я увидел, и что в algГєn момент занимал бы с какими-то svg, состоит в том, что ему было дано средство в пикселях, а именно font-size:35px;

0
ответ дан 02.12.2019, 05:24