将路径宽度更改为svg容器的100% [英] change path width to 100% of svg container
本文介绍了将路径宽度更改为svg容器的100%的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个svg背景图像,但路径不是svg宽度的100%.我也尝试过更改keepaspectratio,但是没有用.
I have an svg background image but path is not 100% of svg width. I have tried change preserveaspectratio as well but did not work.
<svg x="0" y="0" viewBox="0 0 2227 1601" >
<path d="M2166.88,40.32V1441.8l-323.83-195.25a347.4,347.4,0,0,0-352.44-3.72l-5.15,3-397.67,228.46a347.4,347.4,0,0,1-360.61-8.79L61,1038.23V40.32Z"/></svg>
推荐答案
如上所述,您需要更改viewBox属性的值. 在下一个示例中,svg元素具有overflow:visible,因此您可以看到没有溢出.
As I've commented you need to change the value of the viewBox attribute. In the next example the svg element has overflow:visible so that you can see that there is no overflow.
let bb = thePath.getBBox();
theSVG.setAttributeNS(null,"viewBox", `${bb.x} ${bb.y} ${bb.width} ${bb.height}`)
svg{border:solid; width:200px; overflow:visible}
<svg id="theSVG" x="0" y="0" viewBox="0 0 2227 1601" >
<path id="thePath" d="M2166.88,40.32V1441.8l-323.83-195.25a347.4,347.4,0,0,0-352.44-3.72l-5.15,3-397.67,228.46a347.4,347.4,0,0,1-360.61-8.79L61,1038.23V40.32Z"/>
</svg>
如果您需要在路径周围添加某种空白,可以执行以下操作:
If you need to add some sort of white space around the path you can do this:
theSVG.setAttributeNS(null,"viewBox", `${bb.x - padding} ${bb.y - padding} ${bb.width + 2* padding} ${bb.height + 2 * padding}`)
let bb = thePath.getBBox();
let padding = 30;
theSVG.setAttributeNS(null,"viewBox", `${bb.x - padding} ${bb.y - padding} ${bb.width + 2* padding} ${bb.height + 2 * padding}`)
svg{border:solid; width:200px; overflow:visible}
<svg id="theSVG" x="0" y="0" viewBox="0 0 2227 1601" >
<path id="thePath" d="M2166.88,40.32V1441.8l-323.83-195.25a347.4,347.4,0,0,0-352.44-3.72l-5.15,3-397.67,228.46a347.4,347.4,0,0,1-360.61-8.79L61,1038.23V40.32Z"/>
</svg>
这篇关于将路径宽度更改为svg容器的100%的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文