0

I'm using JS to create an SVG image and there's one text element with text that I've been trying to add spacing to. It seems that the element object's textContent uses the literal text, which makes sense, but I'm unable to use innerHTML because IE11 doesn't support this with SVGs unfortunately. I've tried   and but that just appears as the literal text as well... also I just added more spacing directly to the string, ie. **** **** **** but everything but the first space gets stripped out.

The string is just **** **** **** and I'd like to have a few extra spaces between the groups of asterisks.

I know I could create individual elements for each group but if at all possible I'd like to avoid it... I'm not posting the entire content of the image being built but there's already many elements being added to it, so I thought I'd check to see if it's possible to avoid this.

Code:

var container = document.getElementById('container');
var NS = 'http://www.w3.org/2000/svg';

var cardSVG = document.createElementNS(NS, 'svg');

let ccMasking = document.createElementNS(this.NS, 'text');
ccMasking.setAttributeNS(null, 'x', '34');
ccMasking.setAttributeNS(null, 'y', '19.2');
ccMasking.setAttributeNS(null, 'fill', '#fff');
ccMasking.setAttributeNS(null, 'style', 'font-size: 5px');

// Here's the string I'm trying to add space to
ccMasking.textContent = '**** **** ****';

// rest of the svg
cardSVG.setAttributeNS(null, 'viewBox', '0 0 95 70');
cardSVG.setAttributeNS(null, 'id', 'Layer_1');
cardSVG.setAttributeNS(null, 'data-name', 'Layer 1');

var rect1 = document.createElementNS(NS, 'rect');
rect1.setAttributeNS(null, 'fill', '#3CABD9');
rect1.setAttributeNS(null, 'x', '2.55');
rect1.setAttributeNS(null, 'y', '2.71');
rect1.setAttributeNS(null, 'width', '90');
rect1.setAttributeNS(null, 'height', '65');
rect1.setAttributeNS(null, 'rx', '3.35');


cardSVG.appendChild(rect1);
cardSVG.appendChild(ccMasking);
container.appendChild(cardSVG);
<div id="container"></div>

I also tried out

ccMasking.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');

ccMasking.textContent = '****   ****      ****';

But this doesn't work with IE11.

Timbo773
  • 163
  • 1
  • 12
  • Thanks for this, I didn't see this when I was searching around. I tried it out and it works for Chrome and the other browsers but not IE11 unfortunately. – Timbo773 Apr 21 '21 at 15:35
  • automatically closed but the "duplicate" question doesn't actually have a solution accounting for IE11... – Timbo773 Apr 22 '21 at 15:41

0 Answers0