SVG data image not working as a background-image in a pseudo element
Solution 1:
The # character in a URL is reserved to indicate the start of a fragment identifier.
You must URL encode the data URL contents, which means converting any hash characters in the data URL to %23
Solution 2:
You can use the encodeURIComponent(uri)
function of JS.
This function encodes special characters and can encodes also the following characters: , / ? : @ & = + $ #
Reference: https://www.w3schools.com/jsref/jsref_encodeuricomponent.asp