SVG元素无法在Safari中显示阴影过滤器 [英] SVG Elements cannot show shadow filter in Safari
问题描述
我发现Safari& iOS Safari浏览器出于某种原因无法/不会显示SVG阴影(过滤器)。至少对我自己来说,阴影不会只显示在Safari iOS& Safari桌面,它可以在Chrome浏览器中运行。 firefox。
I have found that Safari & iOS Safari browsers cannot/don't show SVG shadows(filters) for some reason. At least for myself the shadows will not show only in Safari iOS & Safari Desktop, it works in chrome & firefox.
有没有办法让Safari浏览器iOS中的SVG元素显示阴影?该网站纯粹是为iPad,所以这是主要错误
我绘制动态箭头,箭头可以具有不同的尺寸&影子偏移。所以这就是我使用SVG元素的原因。问题是SVG阴影从不出现在Safari中。出于某种原因。
I am drawing dynamic arrows, the arrows can/will have different dimensions & shadow offsets. So this is why I am using SVG elements. The problem is that SVG shadows never show in Safari for some reason.
这真令人沮丧。我已经去HTML5画布的箭头,但我发现旋转是荒谬的,无论我怎样做这个箭头只是不想工作!我感到沮丧。
This is really frustrating. I have gone to HTML5 Canvas's to draw arrows but I am finding the rotation is ridiculous, not matter which way I do this the arrows just dont want to work! I feel frustrated.
<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 =redx =10y =10width =300height =60filter =url(#i1)style = - webkit-svg-shadow:0px 0px 10px red;> ;< / rect>
。
这篇关于SVG元素无法在Safari中显示阴影过滤器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!