前端之家

  1. 首页
  2. 问答

如何剪辑内联 SVG *之后 * 它已被透视转换？

• 问答

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

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

如何剪辑内联 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>
delete0012005 回答：如何剪辑内联 SVG *之后 * 它已被透视转换？

您可以将所有表单控件包装在一个 div 中，为其指定相对位置和 z-index 为 1，尽管您进行了变换，它仍会显示在 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>

htmlperspectivesvgz-order
本文链接：https://www.f2er.com/7327.html

大家都在问