我试图通过更改高度和宽度参数来增加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>