Ufdjrw

I'm using SASS to generate my css and i'm trying to create a dotted repeated pattern to simulate a border-bottom on abbr tags using a background image image SVG.

I've searched deep but can't find a solution as i'm using sass to modify the fill color for specific site accents using parent class.

The fill is on the <rect ... /> element in the SVG.

This is my sass below...

ABBR 
 text-decoration: none !important;
 cursor: default !important;
 border: none;
 position: relative;

 &:after 
 content: '';
 display: block;
 position: absolute;
 left: 0;
 right: 0;
 bottom: -2px;
 height: 1px;
 background: 
 image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#$body-color" /></svg>');
 repeat: repeat;
 

 @include accent-colors 
 background: 
 image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#$accent-color" /></svg>') !important;
 
 
 

This is my compiled CSS and as you can see my fill colors are outputting fine.

ABBR 
 text-decoration: none !important;
 cursor: default !important;
 border: none;
 position: relative; 

 ABBR:after 
 content: '';
 display: block;
 position: absolute;
 left: 0;
 right: 0;
 bottom: -2px;
 height: 1px;
 background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#393e44" /></svg>');
 background-repeat: repeat; 

 .accent-green ABBR:after 
 background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#96d63d" /></svg>') !important; 

 .accent-blue ABBR:after 
 background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#5e80f6" /></svg>') !important; 

 .accent-teal ABBR:after 
 background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#2fb8cd" /></svg>') !important; 

 .accent-pink ABBR:after 
 background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#ff6e9e" /></svg>') !important; 

 .accent-purple ABBR:after 
 background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#ca63e5" /></svg>') !important; 

 .accent-orange ABBR:after 
 background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#fd923a" /></svg>') !important; 

 .accent-red ABBR:after 
 background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#e73e50" /></svg>') !important; 

And when i'm viewing the element css using the inspector, there appears to be no errors and its using the correct accent class SVG background. But no fill color is showing.

I've upload the SVG code as an .svg file. When you zoom in you can see the fill on the SVG rect element is pink and working. The code is copied directly from Chrome's web inspector. So it's really bizarre why this does not work in the css background image attribute. Check it out below.

SVG https://a.uguu.se/ZvcDJWMpf5fl_accent-pink.svg

See this link below for an exact repo of my problem in jsfiddle using sass.

Fiddle https://jsfiddle.net/joshmoto/j8on1b9v/

If you inspect the :after element in the dom and remove the # from the rect fill color value you will see the SVG works but it's displaying black. Or check out this version where i've removed the # using a string replace function.

Fiddle https://jsfiddle.net/joshmoto/L1g5fo34/2/

The SVG works, but again black, so not working entirely.

In svg, # needs to be encoded, and replaced with %23.

So you need to create a function to do the replacement. I.E.:

@function url-encoded-color($color) 
 @return '%23' + str-slice('#$color', 2, -1)

And then for svg, place it instead of variable directly:

 background: 
 image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#url-encoded-color($body-color)" /></svg>');
 repeat: repeat;
 

Full example:
https://jsfiddle.net/niklaz/26Ljsmdu/3/