如何裁剪内联 SVG *after* 它已被透视转换？答案

【问题标题】：How to clip an inline SVG *after* it has been transformed with perspective?如何裁剪内联 SVG *after* 它已被透视转换？
【发布时间】：2021-10-06 08:56:17
【问题描述】：

在下面的代码中，按钮不可见，因此不可点击，但它们没有转换。转换后的 SVG 元素溢出按钮所在的位置。我尝试过更改 z-index，但我了解到，一旦发生透视变换，z 轴就不再重要了。

我想要做的就是在转换之后剪辑 SVG，以阻止它溢出到其他控件等。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body style="background-color: #999;">

    <label style="z-index: 0;" for="dd">Choose :</label>

    <select style="z-index: 0;" name="dd" id="dd">
        <option value="Foo">Foo</option>
        <option value="Bar">Bar</option>
    </select>
    <input style="z-index: 0;" type="number" value="0"></input>
    <button style="z-index: 0;" onclick="console.log('start clicked')">Start</button>
    <button style="z-index: 0;transform: translateZ(0px);" onclick="console.log('stop clicked')">Stop</button>

    <svg viewBox="0 0 600 800" style="z-index: -1;transform:  perspective(300px) rotateY(10deg); background-color:cyan "
        width="1280" height="800">
    </svg>
</body>

</html>

【问题讨论】：

标签： html svg perspective z-order

【解决方案1】：

您可以将所有表单控件包装在一个 div 中，为其指定相对位置和 1 的 z-index，尽管您进行了转换，它仍会显示在您的 SVG 上方。然后你可以给那个 div 一个与页面背景相匹配的背景，它看起来就像 SVG 元素被剪裁了一样。

body {
  margin: 0;
}

div {
  position: relative;
  z-index: 1;
  background-color: #fff;
  padding: 1rem;
}

svg {
  z-index: -1;
  transform: perspective(300px) rotateY(10deg);
  background-color: cyan;
  height: 800px;
  width: 1280px
}

<div>
  <label for="dd">Choose :</label>

  <select name="dd" id="dd">
    <option value="Foo">Foo</option>
    <option value="Bar">Bar</option>
  </select>
  <input type="number" value="0" />nii
  <button>Start</button>
  <button>Stop</button>
</div>

<svg width="1280" height="800">
</svg>

【讨论】：