Блог

Я бы хотел, чтобы два вложенных 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 были выровнены по горизонтали поверх родительского элемента. Здесь координаты 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>