After examining the fiddle, it is clear that there is code to set the background of two spans to an image created with svg. The goal now is to achieve this dynamically using javascript (either jquery or raw) on the span with the "help" class, but unfortunately, the code is not functioning as intended. How can I correct the javascript to display an svg image correctly as the background of that specific span?
Below is the provided javascript code:
$('span.help').css( {
'background-image':
"url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'>"+
" <path d='M3,2 A25,25 0 0,1 25,2' style='stroke:#660000; stroke-width: 1; fill: none'/></svg>)",
"font-size": "30px"
});
And here is the corresponding html:
<span class="works">ok</span>
<span class="help">nok</span>
The same static css style is applied to the "works" class span, which works fine in Chrome but encounters issues in Firefox.
span.works {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'><path d='M3,2 A25,25 0 0,1 25,2' style='stroke:#660000; stroke-width: 1; fill: none'/></svg>");
font-size: 30px;
});