Как преобразовать правую сторону блоков SVG немного назад?

Question

Как мне преобразовать / повернуть (?) Правую сторону этих SVG-блоков, чтобы она выглядела больше сзади?

Правая сторона плиток должна быть не выше, а больше назад, что придает ей большую глубину .

Это мой SVG.

width="1250.345px" height="350.345px" viewBox="-30 -30 1250.345 350.345" style="enable-background:new 0 0 1250.574 350.574;"
xml:space="preserve">
<g>
 <path d="M 14,19 L14,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
 <path d="M 117,20 L117,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
 <path d="M 220,20 L220,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
</g>
<g>
 <path d="M 14,103 L14,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
 <path d="M 117,103 L117,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
 <path d="M 220,103 L220,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
</g>
<g>
 <path d="M 14,187 L14,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
 <path d="M 117,187 L 117,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
 <path d="M 220,187 L 220,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
</g>
</svg> ```

Answer 1

Я не знаю, что вы подразумеваете под

Правая сторона плиток должна быть не выше, а ближе к спине, придавая ей большую глубину.

когда кажется, что это именно то, что вы нарисовали.

Вы можете воспроизвести свой рисунок с помощью преобразования skewY().

 <svg version="1.1" id="scgblocks" xmlns="http://www.w3.org/2000/svg"
   width="1250.345px" height="350.345px" viewBox="-30 -30 1250.345 350.345">
  <g transform="skewY(-9)">
    <g>
      <path d="M 14,19 L14,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
      <path d="M 117,20 L117,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
      <path d="M 220,20 L220,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
    </g>
    <g>
      <path d="M 14,103 L14,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
      <path d="M 117,103 L117,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
      <path d="M 220,103 L220,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
    </g>
    <g>
      <path d="M 14,187 L14,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
      <path d="M 117,187 L 117,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
      <path d="M 220,187 L 220,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
    </g>
  </g>
</svg>

Это то, что вы хотели?

Однако, если вместо этого вы имеете в виду, что хотите, чтобы он имел перспективу, то вам нужно сделать это немного по-другому. путь. Вы не можете использовать перспективные преобразования (пока) внутри SVG, но перспективные преобразования допускаются для HTML элементов. Таким образом, пока SVG находится на веб-странице, вы можете применить перспективное преобразование ко всему элементу <svg>, так как браузеры обрабатывают элементы <svg> верхнего уровня как другие элементы HTML.

svg {
  transform: perspective(1800px) rotateY(50deg);
}

<svg version="1.1" id="scgblocks" xmlns="http://www.w3.org/2000/svg"
   width="1250.345px" height="350.345px" viewBox="-30 -30 1250.345 350.345">
  <g>
    <path d="M 14,19 L14,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
    <path d="M 117,20 L117,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
    <path d="M 220,20 L220,100 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
  </g>
  <g>
    <path d="M 14,103 L14,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
    <path d="M 117,103 L117,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
    <path d="M 220,103 L220,183 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
  </g>
  <g>
    <path d="M 14,187 L14,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
    <path d="M 117,187 L 117,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
    <path d="M 220,187 L 220,267 l 100,0 l 0,-80 Z" style="fill:#B1BCB6;" />
  </g>
</svg>