将一个 Svg 图层居中到另一个 Svg答案

【问题标题】：Center one Svg layer into another Svg将一个 Svg 图层居中到另一个 Svg
【发布时间】：2022-01-15 16:04:16
【问题描述】：

我正在尝试做一些简单的任务：将一个 svg 图层包装到另一个图层并居中。

在这种情况下，它是一个简单的箭头（嗯，一个 svg 路径），它应该嵌套在矩形中（在这个特殊的问题中是一个正方形）。

问题是，我对这个 svg 主题完全陌生，到目前为止，我只设法将一个 svg 包装到父 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>

【问题讨论】：

将x="10" y="13" 添加到内部svg。主要思想是主 svg 的中心是 x=19 y=19 ( 38 / 2 ) 为了使箭头居中，您需要将其移动 19 - 18/2 in x 和 19 - 12/2 in y
谢谢，我尝试换成另一个 svg 但可能以错误的 x 和 y 值结束。

标签： html css svg icons center

【解决方案1】：

好吧，没关系，我刚刚解决了它：D

我必须再次将一个 svg 路径（箭头）包装到另一个 svg 层中，并指定 x 和 y 属性以更改 arror 路径的位置。

下面是代码

<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>

【讨论】：