css 将一个Svg图层居中放置到另一个Svg图层中

pgvzfuti  于 2023-02-06  发布在  其他
关注(0)|答案(2)|浏览(168)

我在尝试做一些简单的任务:将一个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>
ztyzrc3y

ztyzrc3y1#

好吧,没关系,我刚刚解决了它:D
我必须再次 Package 一个svg路径(箭头)到另一个svg层,并指定x和y属性,以改变错误路径的位置。
这是密码

<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
        x="10"
        y="13">
    <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>
    
    </svg>
kx1ctssn

kx1ctssn2#

将要居中放置的内容 Package 在另一个svg中,因为它可以具有基于百分比的值。在“外部”svg中,指定要维护的属性,如宽度或高度。如果未指定,宽度将为包含svg的任何内容的100%。
在内部svg中,以百分比形式指定x位置和宽度以满足您的需要。例如x= 25%,宽度= 50%,并设置缩放要求,例如preserveAspectRatio=“xMidYMid meet”viewBox=“0 0 800 52”

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="52px">
    <svg x="25%" width="50%" opacity=".5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 800 51.27">
        <path d="m20.1,44.79c8.47.33,16.98.18,25.46.19,8.12,0,16.25.01,24.37.02,15.61.01,284.23.06,299.84.12,31.81.11,63.63.28,95.44.29,20.41,0,294.81-.05,315.22-.17,1.1,0,1.1-1.66,0-1.66-34.73.22-323.47.22-358.2.11-31.11-.1-62.22-.27-93.33-.26-8.99,0-270.97.02-279.96.08-9.6.06-19.25-.04-28.84.46-.55.03-.55.8,0,.82h0Z"/>
        <path d="m402.79,44.59c0,1.5-1.26,2.72-2.81,2.72s-2.81-1.22-2.81-2.72,1.26-2.72,2.81-2.72,2.81,1.22,2.81,2.72Z"/>
        <g>
            <path d="m27.7,44.4c0,.85-.72,1.55-1.6,1.55s-1.6-.69-1.6-1.55.72-1.55,1.6-1.55,1.6.69,1.6,1.55Z"/>
            <path d="m36.4,44.4c0,1.38-1.16,2.51-2.59,2.51s-2.59-1.12-2.59-2.51,1.16-2.51,2.59-2.51,2.59,1.12,2.59,2.51Z"/>
            <path d="m44.74,48.69c-2.43,0-4.41-1.93-4.41-4.29s1.98-4.29,4.41-4.29,4.41,1.93,4.41,4.29-1.98,4.29-4.41,4.29Zm0-7.09c-1.61,0-2.91,1.25-2.91,2.79s1.31,2.79,2.91,2.79,2.91-1.25,2.91-2.79-1.31-2.79-2.91-2.79Z"/>
        </g>
        <g>
            <path d="m773.3,44.4c0,.85.72,1.55,1.6,1.55s1.6-.69,1.6-1.55-.72-1.55-1.6-1.55-1.6.69-1.6,1.55Z"/>
            <path d="m764.6,44.4c0,1.38,1.16,2.51,2.59,2.51s2.59-1.12,2.59-2.51-1.16-2.51-2.59-2.51-2.59,1.12-2.59,2.51Z"/>
            <path d="m756.26,48.69c-2.43,0-4.41-1.93-4.41-4.29s1.98-4.29,4.41-4.29,4.41,1.93,4.41,4.29-1.98,4.29-4.41,4.29Zm0-7.09c-1.61,0-2.91,1.25-2.91,2.79s1.31,2.79,2.91,2.79,2.91-1.25,2.91-2.79-1.31-2.79-2.91-2.79Z"/>
        </g>
    </svg>
</svg>

相关问题