使用过滤器时如何防止Safari上SVG像素化

Question

在下面的演示中，我在Safari中看到了通过应用

svg {
  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.3));
}

样式化SVG像素化并失去了可伸缩性，这仅在Safari中发生，而在Chrome中不发生

如何在仍然将阴影保留在SVG上的同时如何防止像素化？

您可以使用鼠标滚动进行缩放和平移

const element = document.querySelector('#scene')

// And pass it to panzoom
panzoom(element);

#scene {
  margin-top: 100px;
  margin-left: 100px;
}

svg {
  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.3));
}

<script src='https://unpkg.com/[email protected]/dist/panzoom.min.js'></script>

<div id='scene'>
  <svg>
  <rect width="100" height="100" fill="none" stroke="black" stroke-width="3px"/>

  </svg>
</div>

Answer 1

我尚未在Safari上对其进行测试，但是尝试将drop-shadow参数应用于父div。

这可能会解决Safari中的问题。我还无法测试，请稍后再在Safari上尝试。