Из трех объектов в 1 целый

Question

.cnt_p {width: 200px}

<svg class="cnt_p" viewBox="0 0 36 36">
     <path d="M 18.5,5.5 H 31.3 c 0.6,0 1.2,0.6 1.2,1.5 v 5.7 c 0,0.8 -0.5,1.5 -1.2,1.5 H 18.5 c -0.6,0 -1.2,-0.6 -1.2,-1.5 V 7 c 0,-0.8 0.5,-1.5 1.2,-1.5 z" fill="rgb(255, 0, 0, 90%)"></path>
     <path d="m 24.35274,12.560996 h -1.386746 v -2.369025 h -2.047617 v 2.369025 H 19.53163 V 7.1837431 h 1.386747 v 1.9681685 h 2.047617 V 7.1837431 h 1.386746 z" fill="#fff"></path>
     <path d="m 30.9,9.84 q 0,0.75 -0.34,1.34 -0.34,0.59 -0.86,0.91 -0.39,0.23 -0.86,0.33 -0.46,0.09 -1.11,0.09 H 25.81 V 7.15 h 1.95 q 0.65,0 1.13,0.11 0.47,0.10 0.80,0.31 0.55,0.33 0.87,0.91 0.32,0.57 0.32,1.35 z m -1.43,-0.01 q 0,-0.53 -0.19,-0.90 -0.19,-0.37 -0.61,-0.59 -0.21,-0.10 -0.43,-0.14 -0.22,-0.03 -0.66,-0.03 h -0.35 v 3.36 h 0.35 q 0.49,0 0.72,-0.04 0.23,-0.04 0.45,-0.16 0.37,-0.21 0.55,-0.57 0.17,-0.36 0.17,-0.89 z" fill="#fff"></path>
</svg>

Возможно ли преобразовать все 3 объекта, в один целый?

Answer 1

Это сделать можно. Для этого:

Объединяем все строки path в одну
Заменяем первую m на M у присоединенных путей, чтобы первая точка была задана в абсолютных единицах.
Задаем свойство fill-rule: evenodd

.cnt_p { width: 200px }

<svg class="cnt_p" viewBox="0 0 36 36">
  <path d="M 18.5,5.5 H 31.3 c 0.6,0 1.2,0.6 1.2,1.5 v 5.7 c 0,0.8 -0.5,1.5 -1.2,1.5 H 18.5 c -0.6,0 -1.2,-0.6 -1.2,-1.5 V 7 c 0,-0.8 0.5,-1.5 1.2,-1.5 z
           M 24.35274,12.560996 h -1.386746 v -2.369025 h -2.047617 v 2.369025 H 19.53163 V 7.1837431 h 1.386747 v 1.9681685 h 2.047617 V 7.1837431 h 1.386746 z
           M 30.9,9.84 q 0,0.75 -0.34,1.34 -0.34,0.59 -0.86,0.91 -0.39,0.23 -0.86,0.33 -0.46,0.09 -1.11,0.09 H 25.81 V 7.15 h 1.95 q 0.65,0 1.13,0.11 0.47,0.10 0.80,0.31 0.55,0.33 0.87,0.91 0.32,0.57 0.32,1.35 z m -1.43,-0.01 q 0,-0.53 -0.19,-0.90 -0.19,-0.37 -0.61,-0.59 -0.21,-0.10 -0.43,-0.14 -0.22,-0.03 -0.66,-0.03 h -0.35 v 3.36 h 0.35 q 0.49,0 0.72,-0.04 0.23,-0.04 0.45,-0.16 0.37,-0.21 0.55,-0.57 0.17,-0.36 0.17,-0.89 z"
           fill="rgb(255, 0, 0, 90%)" fill-rule="evenodd">
  </path>
</svg>

БЛОГ НА HUSL

Из трех объектов в 1 целый

Ответы (1 шт):