我正在尝试在图像上方应用 svg 并保持其长宽比与对象适合。
svg 和图像具有相同的大小（100vw 和 100vh），并且它们使用相对/绝对位置进行定位。我想让这个 SVG 具有交互性，但只能使用像这样的标签<svg>, <object> or <iframe>，因为它们允许我访问 JS 中的元素。
当我应用<img>通过 CSS 的配置，工作正常：
<body>
<main class="full-viewport relative">
<div class="full-viewport object-cover relative">
<img class="full-viewport object-cover absolute" src="https://i.postimg.cc/j2CWcLQN/cafe-night.png" />
<!-- works good - ideal positioning but can't have interactivity with js -->
<img class="full-viewport object-cover absolute remove-white-background" src="../svg/left-light.svg" />
Image in full size:
调整图像大小：
SVG 以绿灯始终保持在正确位置上方的方式跟随图像。
但我想与这个光交互，为了得到这个，显然我需要使用不同的标签，比如纯标签<svg>HTML 里面或者类似的东西<object>
问题是：当我使用这些特定标签时，SVG 不能完美地遵循图像。我已经尝试过将 svg 与viewBox and preserveAspectRatio属性，但没有任何改变。
Image in full size and with <object> tag:
Resized image (with <object> tag):
完整的 HTML：
<!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>test</title>
<link rel="stylesheet" type="text/css" href="../css/lightTest.css"/>
</head>
<body>
<main class="full-viewport relative">
<div class="full-viewport object-cover relative">
<img class="full-viewport object-cover absolute" src="https://i.postimg.cc/j2CWcLQN/cafe-night.png" />
<!-- works good - ideal positioning but can't have interactivity with js -->
<img class="full-viewport object-cover absolute remove-white-background" src="../svg/left-light.svg" />
<!-- doesn't work (object tag) - can interact with js but positioning doesn't follow the object-fit -->
<!-- <object class="full-viewport object-cover absolute remove-white-background" data="../svg/left-light.svg" type="image/svg+xml"></object> -->
<!-- doesn't work (svg with preserveAspectRatio) - can interact with js but positioning doesn't follow the object-fit -->
<!-- <svg class="full-viewport absolute remove-white-background" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" style="
background:
linear-gradient(76deg, transparent 40.25%, white 40.5%),
linear-gradient(14.7deg, transparent 62.3%, white 0%),
linear-gradient(-5deg, transparent 32% , rgb(50, 221, 137), rgb(0, 255, 255));">
<rect x="0" y="0" fill="transparent" />
</svg> -->
</div>
</main>
</body>
</html>
CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.full-viewport {
height: 100vh;
width: 100vw;
}
.object-cover {
object-fit: cover;
}
.remove-white-background {
mix-blend-mode: darken;
}
左灯 svg：
<svg width="1920" height="1080" xmlns="http://www.w3.org/2000/svg" style="
width:1920px;
height:1080px;
background:
linear-gradient(76deg, transparent 40.25%, white 40.5%),
linear-gradient(14.7deg, transparent 62.3%, white 0%),
linear-gradient(-5deg, transparent 32% , rgb(50, 221, 137), rgb(0, 255, 255));">
<rect width="1920" height="1080" x="0" y="0" fill="transparent" />
</svg>
None