Question

我想使用聚光灯效果，但它似乎只适用于Chrome，外观＆＃34;只是确定＆＃34;在Firefox中，但不会在Safari中定位（x，y，z）。（未经测试的其他浏览器）

我尝试过不同的滤镜和原始单位，虽然这有所不同，但Safari似乎无论如何都无法定位灯光效果。

为了理解正在发生的事情，我尝试了很多变通方法，包括不同的userSpaceOnUse / objectBoundingBox组合，以及不同的svg结构，但从未能找到适用于Safari的方法。

实施例

默认过滤器/基元单位： https://jsfiddle.net/localnerve/y470d52v/

objectBoundingBox单位： https://jsfiddle.net/localnerve/uyc7o52k/

一张图片也值1000字（Safari，Chrome，FF）。 Safari上的聚光灯在右边的画布上呈现，并从右侧渗透。

为了显示Safari上的聚光灯位置＆＃34;出于打击＆＃34;，我在网络检查员中轻推他们，这样我就可以看到聚光灯呈现：

以下是使用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>

非常感谢您给予的任何见解。

Answer 1

webkit / Safari中存在用于光源定位变换和oBB单元的已知错误。在webkit / blink引擎分裂之后，Apple没有人从Chrome团队中挑选出这些漏洞。

https://bugs.webkit.org/show_bug.cgi?id=88877 https://bugs.webkit.org/show_bug.cgi?id=113059

解决方法是不使用转换和oBB单元（通过JavaScript进行任何动态定位或大小调整）

Safari麻烦定位SVG feSpotlight过滤器

实施例

1 个答案: