CODEWITHSUNDEEP
internet-explorersvgswiper.js
mikeLspohn
mikeLspohn

Reputation: 495

IE svg isn't showing the fill color

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

Answers (1)

Robert Longson
Robert Longson

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

Related Questions