Не привязывать элемент к конкретной разметке

  svg {height: 100px}
  .st {
    fill: rgb(255, 0, 0, 90%) !important;
    transform-origin: 3.1px 0;
    transform: scaleX(-1);
    transition: all .2s linear 0s;
  }
  .ff {fill: rgb(131 131 131) !important}
<svg viewBox="0 0 10 10"><path class='st' d="m 2.52,3.83 c -0.01,0 -0.03,0 -0.04,0 -0.03,0 -0.06,0.01 -0.09,0.04 -0.04,0.03 -0.06,0.09 -0.05,0.15 0,0 0,0.02 0,0.03 v 1.81 c 0,0.12 0.08,0.23 0.19,0.23 0.01,0 0.03,0 0.04,0 0.06,0 0.12,-0.03 0.16,-0.06 L 3.77,5.17 c 0.03,-0.03 0.06,-0.06 0.06,-0.1 0,0 0,0.01 0,-0.01 0,0 0,-0.02 0,-0.03 -0.01,-0.03 -0.03,-0.06 -0.06,-0.09 L 2.67,3.9 C 2.66,3.89 2.64,3.87 2.62,3.86 c 0,0 0,0 0,0 -0.03,-0.02 -0.06,-0.03 -0.09,-0.03 z"></path><path class='ff' d="m 2.7,2.3 c -0.2,0 -0.37,0.16 -0.37,0.37 v 0.02 c 0,0.21 0.16,0.38 0.37,0.38 h 4.57 c 0.2,0 0.37,-0.17 0.37,-0.38 v -0.02 c 0,-0.2 -0.16,-0.37 -0.37,-0.37 z M 4.97,3.84 c -0.21,0 -0.38,0.16 -0.38,0.3735477 0,0.2 0.16,0.37 0.38,0.37 h 2.3 c 0.2,0 0.37,-0.16 0.37,-0.37 0,-0.2 -0.16,-0.37 -0.37,-0.37 z m 0,1.52 c -0.21,0 -0.38,0.16 -0.38,0.37 v 0.01 c 0,0.2 0.16,0.37 0.38,0.37 h 2.3 c 0.2,0 0.37,-0.16 0.37,-0.37 v -0.01 c 0,-0.2 -0.16,-0.37 -0.37,-0.37 z M 2.7,6.89 c -0.2,0 -0.37,0.16 -0.37,0.37 v 0 c 0,0.2 0.16,0.37 0.37,0.37 h 4.57 c 0.2,0 0.37,-0.16 0.37,-0.37 v 0 c 0,-0.2 -0.16,-0.37 -0.37,-0.37 z"></path></svg>

Смущает, что приходится привязывать элемент

transform-origin: 3.1px 0;

То есть к 3px, возможно ли иначе?


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