如何将 SVG 块的右侧稍微向后转换？

Question

如何 transform/rotate(?) 这些 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

我不知道你说的

是什么意思

The right side of the tiles should not be higher but more to the back giving it more dept.

当这看起来与您所画的完全一致时。

您可以使用 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>

如何将 SVG 块的右侧稍微向后转换？

How to transform the right side of SVG blocks a bit to the back?

svg

tiles