如何组装和对齐svg？

Posted 2023-02-16

【中文标题】如何组装和对齐svg？

【英文标题】：How to assemble and align svg?

【发布时间】：2022-01-15 17:54:56

【问题描述】：

如您所见，图像包含三个部分：标记、圆圈和图标：

<svg   fill="none" xmlns="http://www.w3.org/2000/svg" style="background-color:#eee">
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.434 56.755C49.337 53.142 58 42.082 58 29 58 12.984 45.016 0 29 0S0 12.984 0 29c0 13.083 8.663 24.142 20.566 27.755l6.834 9.112a2 2 0 0 0 3.2 0z" fill="#fff"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29 55c14.36 0 26-11.64 26-26S43.36 3 29 3 3 14.64 3 29s11.64 26 26 26z" fill="#000000"/>
<path d="M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2v7zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4z" fill="#ffffff"/>
</svg>

图标未居中。

有人知道如何重新排序所有这些吗？

【问题讨论】：

通过了解 M 在 SVG d-path 中的作用：developer.mozilla.org/en-US/docs/Web/SVG/Element/path

请将transform="translate(17,16)"添加到最后一个路径

感谢 enxaneta

或将最后一条路径更改为以 M28 25 (11+17 , 9+16)

开头

@Danny'365CSI'Engelman 这将在全相对路径的情况下执行，即所有小写命令。在 M28 25 以上的路径的情况下，会扭曲路径而不是移动它

【参考方案1】：

我没有很好地理解你的问题，你想将图像内的图像对齐还是对齐到你的 html 的中心？

如果你想对齐到你的 html 网页的中心，你可以使用这个 transform: translate((x-axis)px,((y-axis)px); 在你的 CSS 上，例如 transform: translate(300px,50px);

如果你想对齐另一个图像中的项目，你需要将你的 main-svg 设置为 position:relative 并放置你的另一个 svg position:absolute 并且你可以更容易地调整位置。

嗯，希望对您有所帮助，您可能会从其他人那里得到更好的解决方案，我几周前刚刚学习了 html 和 CSS。