我在尝试做一些简单的任务:将一个SVG层包裹到另一个SVG层中并使其居中。
在本例中,它是一个简单的箭头(嗯,一个svg路径),应该嵌套在矩形(在这个特定的例子中是正方形)中。
问题是,我对这个svg主题完全是新手,到目前为止我只设法将一个svg Package 成父svg,时间是至关重要的:)
我试着做我自己的研究,但到目前为止我没有看到一个简单的解释,只有如何合并层,而不是必要的中心到另一个(只有作为中心在div标签)
这里有一个代码
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="37" height="37" rx="9.5" stroke="#222426"/>
<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.66732 0.999999L8.72964 10.8681C8.76363 10.9095 8.80536 10.9428 8.85208 10.9655C8.89879 10.9882 8.94943 11 9.00065 11C9.05187 11 9.10251 10.9882 9.14922 10.9655C9.19594 10.9428 9.23767 10.9095 9.27167 10.8681L17.334 1" stroke="#222426" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</svg>
2条答案
按热度按时间ztyzrc3y1#
好吧,没关系,我刚刚解决了它:D
我必须再次 Package 一个svg路径(箭头)到另一个svg层,并指定x和y属性,以改变错误路径的位置。
这是密码
kx1ctssn2#
将要居中放置的内容 Package 在另一个svg中,因为它可以具有基于百分比的值。在“外部”svg中,指定要维护的属性,如宽度或高度。如果未指定,宽度将为包含svg的任何内容的100%。
在内部svg中,以百分比形式指定x位置和宽度以满足您的需要。例如x= 25%,宽度= 50%,并设置缩放要求,例如preserveAspectRatio=“xMidYMid meet”viewBox=“0 0 800 52”