Изменение размера SVG в HTML без изменения размера холста

Question

Я пытаюсь увеличить размер изображения SVG, изменяя параметры высоты и ширины, но он не работает, вместо этого меняется размер холста и появляются панели навигации. Также есть две копии параметров высоты и ширины. Я не знаю, какие из них изменить.

<svg xmlns:.... 
     width="85.75438690185547" 
     height="75.7368392944336" 
     xml:space="preserve" 
     inkscape:version="0.48.4 r9939" 
     sodipodi:docname="output.svg" 
     style=""><rect 
     id="backgroundrect" 
     width="100%" 
     height="100%" 
     x="0" y="0" 
     fill="none" 
     stroke="none"/>
     ...
 </svg>

Answer 1

Чтобы изменить размеры форм svg без изменения размеров холста svg, добавьте viewBox

Я добавил красную рамку, чтобы показать границы холста svg.

style="border:1px solid red;"

В приведенном ниже примере размер svg canvas width ="85" и height ="75" равен размеру
viewBox = "0 0 85 75"

Следовательно, прямоугольник отображается как есть, без изменения его размера.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="85" height="75" viewBox="0 0 85 75" style="border:1px solid red;" >   
	
	<rect x="0" y="0" width="42" height="35" fill="purple" />
</svg>	

• Чтобы увеличить размер прямоугольника без изменения размера на холсте svg нужно уменьшить размер viewBox="0 0 42 35"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="85" height="75" viewBox="0 0 42 35" style="border:1px solid red;" >   
	
	<rect x="0" y="0" width="42" height="35" fill="purple" />
</svg>	 

• Чтобы уменьшить размер прямоугольника без изменения размера холст svg нужно увеличить размер viewBox = "0 0 170 150"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="85" height="75" viewBox="0 0 170 150" style="border:1px solid red;" >   
	
	<rect x="0" y="0" width="42" height="35" fill="purple" />
</svg>	 

Надеюсь, это вам поможет.

Answer 2

Удалите атрибуты width и height из svg, а затем измените их размер в css. EG:

#someIcon {
  width: 100px;
  transition: all 0.5s ease;
}

#someIcon:hover {
  width: 200px;
}

#someIcon:hover .disc {
  fill: red;
}

<svg id="someIcon" viewBox="0 0 84 98" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="disc" fill-rule="evenodd" clip-rule="evenodd" d="M42 70C57.464 70 70 57.464 70 42C70 26.536 57.464 14 42 14C26.536 14 14 26.536 14 42C14 57.464 26.536 70 42 70Z" fill="#009688"/>
<path class="plus" fill-rule="evenodd" clip-rule="evenodd" d="M49 41H43V35H41V41H35V43H41V49H43V43H49V41Z" fill="white"/>
</svg>

ИЛИ скажи SVG быть 100% и положи в контейнер, размер которого ты можешь контролировать. EG:

#iconwrapper {
  border: 1px solid red;
  display: inline-block;
  width: 25%;
  transition: all 0.5s ease;
}

#iconwrapper:hover {
  width: 50%;
}

#iconwrapper:hover .disc {
  fill: pink;
}

<div id="iconwrapper">
  <svg id="someIcon" width="100%" height="100%" viewBox="0 0 84 98" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="disc" fill-rule="evenodd" clip-rule="evenodd" d="M42 70C57.464 70 70 57.464 70 42C70 26.536 57.464 14 42 14C26.536 14 14 26.536 14 42C14 57.464 26.536 70 42 70Z" fill="blue"/>
<path class="plus" fill-rule="evenodd" clip-rule="evenodd" d="M49 41H43V35H41V41H35V43H41V49H43V43H49V41Z" fill="white"/>
</svg>
</div>