时间戳

首页 > 解决方案 > 水平对齐嵌套的 SVG

svg - 水平对齐嵌套的 SVG

问题描述

我想让两个嵌套的 SVG 水平对齐（并排）。然而，默认行为似乎是它们折叠和重叠，这样只有红色 SVG 以及父 SVG 的其余部分是可见的。

这可能吗？如果可以，怎么做？

<svg width="80" height="40" style="background-color:skyblue">
  <svg width="40" height="40">
    <path d="M0,0 h40 v40 h-40 v-40 z" fill="green"/>
  </svg>
  <svg width="40" height="40">
    <path d="M0,0 h40 v40 h-40 v-40 z" fill="red"/>
  </svg>
</svg>

演示：https ://jsfiddle.net/5qjcLpdt/

标签： svg

解决方案

根据上面的尺寸，我假设您希望两个方形 SVG 元素在父元素上水平对齐。在这里，将 x 和 y 坐标添加到子元素以定位它们：

    <svg width="80" height="40" style="background-color:skyblue">
      <svg x=0 y=0 width="40" height="40">
        <path d="M0,0 h40 v40 h-40 v-40 z" fill="green"/>
      </svg>
      <svg x=40 y=0 width="40" height="40">
        <path d="M0,0 h40 v40 h-40 v-40 z" fill="red"/>
      </svg>
    </svg>

推荐阅读