Атрибут "d" элемента SVG, похоже, не превращает его в вычисляемые элементы

Question

Я пишу расширение Chrome и пытаюсь применить символ SVG X к левой стороне div.Он должен выглядеть примерно так, как при редактировании тегов, связанных с вопросом о переполнении стека, - небольшого элемента с X справа.

Вот соответствующий раздел:

        var cancelDiv = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        cancelDiv.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
        cancelDiv.setAttribute('style', 'pointer-events : none');
        cancelDiv.setAttribute('width', '12');
        cancelDiv.setAttribute('height', '12');
        cancelDiv.setAttribute('color', '#e91c26');
        cancelDiv.setAttribute("stroke", "black");
        cancelDiv.setAttribute("stroke-width", "3px");
        cancelDiv.setAttribute("opacity", 1);
        cancelDiv.setAttribute("fill", "none");
        cancelDiv.setAttribute('viewBox', "0 0 14 14");
        cancelDiv.setAttribute("d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");

        div.appendChild(document.createTextNode(result['categories'][i]));
        div.appendChild(cancelDiv);

        document.body.appendChild(div);