Can I use data URI and anchor reference in backdrop-filter?
Backdrop-filter allows the following syntax
backdrop-filter: url(foo.svg#idOfFilter)
I can use data-URI for background image.
background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9Im15RmlsdGVyIj48ZmVHYXVzc2lhbkJsdXIgc3REZXZpYXRpb249IjE1Ij48L2ZlR2F1c3NpYW5CbHVyPjwvZmlsdGVyPjwvc3ZnPg==");
But I don't get the syntax for replacing foo.svg ( = name of an image) by a data-URI. And even less how to replace foo.svg#anchor by a data-uri#anchor.
backdrop-filter:url("data..."#anchor)
backdrop-filter:url((data...)#anchor)
backdrop-filter:url(data...#anchor)
I tried b64encoding (data:image/svg+xml;base64,...) or plain encoding (data:image/svg+xml;charset=utf-8, ...) with no success (= firefox debugger keeps complaining syntax is not right)
The actual SVG that is base 64 encoded is
<svg xmlns="http://www.w3.org/2000/svg"><filter id="myFilter"><feGaussianBlur stDeviation="15"></feGaussianBlur></filter></svg>
Of course, this is not the filter I intend to use at the end (otherwise I'd have used a simple blur(15px)
EDIT: Solution is
backdrop-filter:url(data:image/svg+xml;base64,...base64_string...#anchor)