我发现 Safari 和 iOS Safari 浏览器由于某种原因不能/不显示 SVG 阴影(过滤器)。至少对我来说,阴影不会只在 Safari iOS 和 Safari Desktop 中显示,它适用于 chrome 和 firefox。
有没有办法让 SVG 元素在 Safari iOS 中显示阴影?该网站仅适用于 iPad,因此这是一个重大错误
我正在绘制动态箭头,箭头可以/将具有不同的尺寸和阴影偏移。所以这就是我使用 SVG 元素的原因。问题是 SVG 阴影出于某种原因从未在 Safari 中显示。
这真是令人沮丧。我已经去 HTML5 Canvas 绘制箭头,但我发现旋转是荒谬的,无论我用哪种方式,箭头都不想工作!我感到很沮丧。
<svg class="ArrowBox" width="424px" height="100px" fill="blue">
<filter id = "i1" width = "150%" height = "150%">
<feOffset result = "offOut" in = "SourceGraphic" dx = "0" dy = "0"/>
<feGaussianBlur result = "blurOut" in = "offOut" stdDeviation = "10"/>
<feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal"/>
</filter>
<rect fill="red" x="10" y="10" width="300" height="60" filter="url(#i1)"></rect>
</svg>
最佳答案
尝试 <rect fill="red" x="10" y="10" width="300" height="60" filter="url(#i1)" style="-webkit-svg-shadow:0px 0px 10px red;"></rect>
相反。
关于html - SVG 元素无法在 Safari 中显示阴影过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8936667/