https://github.com/alex-page/bug-safari-svg
🐛 Safari feColorMatrix doesn't work with external a files
https://github.com/alex-page/bug-safari-svg
Last synced: 3 months ago
JSON representation
🐛 Safari feColorMatrix doesn't work with external a files
- Host: GitHub
- URL: https://github.com/alex-page/bug-safari-svg
- Owner: alex-page
- Created: 2018-04-11T06:40:50.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-04-19T21:30:51.000Z (about 4 years ago)
- Last Synced: 2025-01-17T00:28:25.086Z (5 months ago)
- Language: HTML
- Homepage: https://alex-page.github.io/bug-safari-svg/
- Size: 13.7 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🐛 SVG feColorMatrix
> Safari feColorMatrix doesn't work with external a files
This issue was found in **Safari 11.1** and **Mac OS High Sierra 10.13.4**
This [example](https://alex-page.github.io/bug-safari-svg/) shows a red box three times:
- Box one adds a SVG filter using css to embedd a svg
- Box two adds a SVG filter using an external svg file with css pointing to file and ID
- Box three is the default state
When using a file ( `filters.svg` ) with the ID's of the filters you can not do this CSS in safari:
```css
.filter {
filter: url( "filters.svg#deuteranopia" );
}
```
You have to embed the svg into the HTML and use this in CSS:
```css
.filter {
filter: url( "#deuteranopia" );
}
```