[英]Resizing SVG in HTML without resizing canvas
我正在嘗試通過更改高度和寬度參數來增加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>
要在不更改svg
畫布尺寸的情況下調整svg
形狀的大小,請添加viewBox
我添加了一個紅色框以顯示svg畫布的邊框。
style="border:1px solid red;"
在下面的示例中, svg
畫布的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>
我希望這可以幫助你。
從svg中刪除width和height屬性,然后在CSS中調整其大小。 例如:
#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%,並放入一個您可以控制尺寸的容器中。 例如:
#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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.