Reputation: 495
I'm using swiper.js for a simple slider image gallery. It uses svg for the next and previous arrows, and I've had to change the fill color to match the site I'm using it on. Firefox didn't work with the fill color using hex, so I changed it to rgb and it now works in Chrome and Firefox. Anyone know about IE's support for SVG and how to fix this? Here's the code.
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'><path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='rgb(138,0,0)'/></svg>");
left: 10px;
right: auto;
}
The part in question is the fill='rgb(138,0,0)'
Upvotes: 2
Views: 3529
Reputation: 124324
You need to URL encode the data when using a data URI.
It's the unencoded # character in the URL that Firefox didn't like, URL encoding your make that %23.
IE is even stricter and will make you URL encode spaces (as %20).
Best stick the entire URL through an encoder, there are plenty of online ones about. Alternatively convert the data to base64.
Upvotes: 3