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;
}
}
}
但我想知道是否有更好的解决方案?