如何解决如何剪辑内联 SVG *之后 * 它已被透视转换?
在下面的代码中,按钮不可见,因此不可点击,但它们没有转换。转换后的 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>
解决方法
您可以将所有表单控件包装在一个 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。