0

dropshadow在 SVG 中的 a内的元素上使用 a时foreignObject，该元素在 Chrome 和 Safari 上正常工作时，不会在 Safari 上正确显示和缩放。

这是我的 SVG 代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 666">
  <!-- ... -->
  <g transform="translate(186.7810034751892, 0)">
    <foreignObject y="0" width="145" height="62">
      <div class="wrapper">
        <div class="element">
          <span>Some text</span>
        </div>
      </div>
    </foreignObject>
  </g>
  <!-- ... -->
</svg>

和我的 CSS 代码：

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.element {
  min-height: 24px;
  max-width: 130px;
  background-color: #C4E7EE;
  border-radius: 4px;
  padding: 4px;
  color: #0A99B7;
  filter: drop-shadow(0px 2px 4px rgba(128, 128, 128, 0.4)); /* The problematic drop shadow */
  margin: 12px;
}

移除阴影时，元素被放置在正确的位置和比例。你可以在这个 JSFiddle 上试试：https ://jsfiddle.net/odv3bh9j/

目前，我通过删除阴影找到了以下解决方法：

@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) and (display:flow-root) {
    .element {
      filter: unset;
    }
  }
}

但我想知道是否有更好的解决方案？

4

0 回答 0