个人中心
gpt4 book ai didi

svg - Safari 麻烦定位 SVG feSpotlight 滤镜

转载 作者：行者123 更新时间：2023-12-04 17:51:06 34 4
gpt4 key购买 nike

我想使用聚光灯效果，但它似乎只在 Chrome 中有效，在 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 上的聚光灯呈现在右侧的 Canvas 外，并从右侧渗入。

LTR: Safari, Chrome, and Firefox showing the spotlight

为了显示 Safari 上的聚光灯位置“不正常”，这是我在 Web 检查器中轻推它们以便我可以看到聚光灯渲染:

enter image description here

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

非常感谢您提供的任何见解。

最佳答案

在 webkit/Safari 中存在关于光源定位 wrt 变换和 oBB 单位的已知错误。在 webkit/blink 引擎 split 之后，Apple 没有人从 Chrome 团队那里发现这些错误。

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

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

关于svg - Safari 麻烦定位 SVG feSpotlight 滤镜，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44891524/

34 4 0
文章推荐： angularjs - 即使在成功调用 api 后，.NET Core web api 也会出现 CORS 错误
文章推荐： perl - 如何访问 Dancer2 的 session 对象？
文章推荐： r - 将 GENCODE ID 转换为 Ensembl - Ranged SummarizedExperiment
文章推荐： python - 从 bucket.objects.all() 迭代中解压 s3.ObjectSummary
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com