我想使用聚光灯效果，但它似乎只能在Chrome中工作，在Firefox中看起来“还好”，但无法在Safari中定位（x，y，z）。 （未测试其他浏览器）
我尝试了不同的过滤器和基本单位，虽然这有所改善，但Safari仍然无法在任何情况下定位照明效果。
为了理解发生了什么，我尝试了许多解决方法，包括不同的userSpaceOnUse / objectBoundingBox组合和不同的svg结构，但从未能够找到适用于Safari的方法。
示例：
默认过滤器/原始单位： https://jsfiddle.net/localnerve/y470d52v/ objectBoundingBox单位： https://jsfiddle.net/localnerve/uyc7o52k/ 一张图片胜过千言万语（Safari，Chrome，FF）。 Safari上的聚光灯渲染到屏幕右侧，并从右侧溢出。
任何您能提供的见解都将不胜感激。
我尝试了不同的过滤器和基本单位，虽然这有所改善，但Safari仍然无法在任何情况下定位照明效果。
为了理解发生了什么，我尝试了许多解决方法，包括不同的userSpaceOnUse / objectBoundingBox组合和不同的svg结构，但从未能够找到适用于Safari的方法。
示例：
默认过滤器/原始单位： https://jsfiddle.net/localnerve/y470d52v/ objectBoundingBox单位： https://jsfiddle.net/localnerve/uyc7o52k/ 一张图片胜过千言万语（Safari，Chrome，FF）。 Safari上的聚光灯渲染到屏幕右侧，并从右侧溢出。
这是使用objectBoundingBox滤镜和基元单位的代码：
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
color: #fff;
}
* {
transform-origin: 50% 50% 0;
}
.scene-container {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.scene-container.content {
position: relative;
width: 100%;
height: 150vh;
background-image: linear-gradient(hsla(240, 90%, 8%, 1) 0%, 99%, hsla(217,24%,71%,0) 100%);
box-shadow: 0px -10px 20px hsl(240, 90%, 8%);
}
.spot {
height: 100%;
width: 100%;
}
</style>
<body>
<div class="scene-container content">
<h2>Here's a spotlight.</h2>
<svg class="spot" viewBox="0 0 2000 3000" preserveAspectRatio="xMidYMid">
<defs>
<filter x="-0.2" y="-0.2" width="1.4" height="1.4" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" id="spotlight">
<feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur1"></feGaussianBlur>
<feSpecularLighting result="specOut" in="blur1" specularConstant="1.8" specularExponent="5" lighting-color="#ffffff">
<feSpotLight x="0.5" y="-0.4" z="0.03" pointsAtX="0.5" pointsAtY="0.8" pointsAtZ="0" limitingConeAngle="13.7"></feSpotLight>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"></feComposite>
</filter>
<clipPath id="spot-clip">
<rect x="-50" y="2840" width="2200" height="200"></rect>
</clipPath>
<filter id="spot-blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="15">
</feGaussianBlur>
</filter>
</defs>
<g transform="translate(0, -175)" filter="url(#spotlight)">
<ellipse cx="50%" cy="95.333%" rx="27%" ry="130" fill="#fff" clip-path="url(#spot-clip)" filter="url(#spot-blur)"></ellipse>
<rect x="25%" y="43.667%" width="50%" height="50%" stroke="peru" stroke-width="3%" stroke-linejoin="round" fill="#000"></rect>
</g>
</svg>
</div>
</body>
任何您能提供的见解都将不胜感激。