Я хочу использовать эффект прожектора, но, кажется, он работает только в Chrome, выглядит «просто нормально» в Firefox, но не будет позиционировать (x, y, z) в Safari. (Другие браузеры не тестировались)
Я пробовал разные фильтры и примитивы, и хотя это имеет значение, Safari по-прежнему не может позиционировать эффект освещения в любом случае.
Пытаясь понять, что происходит, я перепробовал множество обходных путей, включая различные комбинации userSpaceOnUse/objectBoundingBox и различную структуру svg, но так и не смог найти тот, который работает в Safari.
Примеры
Фильтр/примитивы по умолчанию: https://jsfiddle.net/localnerve/y470d52v/
Единицы objectBoundingBox: https://jsfiddle.net/localnerve/uyc7o52k/
Картинка тоже стоит 1000 слов (Safari, Chrome, FF). Прожектор в Safari отображается за пределами холста справа и просачивается справа.
Чтобы показать, что положение прожекторов в 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>
Любое понимание, которое вы можете дать, очень ценится.
