Why is filter(drop-shadow) causing my SVG to disappear in Safari?

前端未结

关注

 6  721

I am developing an app using D3.js. I was sidetracked for a while, and recently came back to it. Today I found that, though it worked fine in the past, the SVG map in the ap

相关标签:

6条回答

傲寒

2020-12-06 06:22

I also had loading indicator never stopping to rotate when this happened. Also when SVG with a style tag which set the shadow was opened in a separate window, there was no shadow. The solution was to use an SVG filter, and make sure to duplicate the element on which it was set, so that if the image is resized, the mobile safari would not pixelate it. E.g., as described here https://stackoverflow.com/a/52250105/1267201

0 讨论(0)
发布评论:

提交评论
- 加载中...
终归单人心

2020-12-06 06:24
Probably is a little late, but just in case I will leave you my answer. I had the same problem with Safari and I figured out that this seems to be a Safari issue/bug. You can work around this bug just wrapping your SVG tag with another HTML tag like a div and apply to this element the drop-shadow filter as you did in your example. Here you have your example modified with the wrapper element

https://codepen.io/mauromjg/pen/rLaqWG
```
<div class="svg-wrapper">
    <svg>...</svg>
</div>

//CSS
.svg-wrapper {
    -webkit-filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.4) );
    filter: drop-shadow( 2px 2px 4px rgba(0,0,0,.4) );
}
```
Hope that helps!
0 讨论(0)
发布评论:

提交评论
- 加载中...
旧时难觅i

2020-12-06 06:37
I had a similar issue with Safari: SVG objects such as lines would disappear as soon as a filter effect was applied. The same code worked fine in Chrome and Firefox. The code was part of an Angular app. It turns out the problem was triggered by Angular employing the "base" tag.

It appears that Safari applies the base tag to fragment names within embedded SVG images, whereas Chrome and Firefox do not. This code illustrates the issue:
```
<html>
 <head>
  <base href="/">
 </head>
 <body>
  <svg>
   <filter filterUnits="userSpaceOnUse" id="glow">
      <feGaussianBlur stdDeviation="1.5"></feGaussianBlur>
   </filter>
   <line x2="99" y2="99" stroke="red" filter="url(#glow)"></line>
   <line y1="99" x2="99" stroke="green" filter="url(/_display/#glow)"></line>
  </svg>
 </body>
</html>
```
On Safari, only the green line will show, whereas Chrome and Mozilla with show both red and green line.

jsfiddle demonstrating the problem
0 讨论(0)
发布评论:

提交评论
- 加载中...
长情又很酷

2020-12-06 06:38
In my case, I was using an SVG Filter, so I couldn't really apply the CSS solution. Instead, I was able to get the SVG to show up by applying a CSS transformation via Javascript after the page loads. Here's an example in plain JS:
```
setTimeout(function(){
 document.getElementById("svg-element").style.display = "block";
},10);
```
If you want to know if this will work, see if the SVG shows up after you resize the browser or modify a CSS style rule using the inspector.
0 讨论(0)
发布评论:

提交评论
- 加载中...
抹茶落季

2020-12-06 06:41
I had the same issue in our Angular app since we use the <base> tag.

I added this to the controller:
```
$scope.basePath = window.location.href;
```
Then in the template I added the base path to the filter:
```
<g ng-attr-filter="url({{basePath}}#filter1_d)">
```
Hopefully this helps anyone who's using Angular. Check out this comment in Github for more information: https://github.com/airbnb/lottie-web/issues/360#issuecomment-320243980
0 讨论(0)
发布评论:

提交评论
- 加载中...

心在旅途

2020-12-06 06:47

Browsers calculate things differently and for some reason Safari hates you. Lol.

However you should be using SVG Filters instead. They are much more reliable.

SOURCE - w3schools

 <svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

Hope that helps!

0 讨论(0)