Странное изображение с SVG в атрибуте src в браузере Edge

Question

Я рендеринг изображения, и я передаю SVG-файл в качестве исходного атрибута изображения.Он отлично работает во всех браузерах, кроме Edge.Я не могу найти причину, почему он отображает этот странный черный ящик с крестиком:

HTML-код похож на: <img width="3029" height="3920" id="id_of_image" src="data:image/svg+xml;charset=utf-8,<svg xmlns=....................CONTENT OF SVG............></svg>"/>

Как я могу показать этот вид изображения также на краю?Я заполняю атрибут src из JS, где у меня есть элемент в виде строки.Мне нужно поместить его в атрибут изображения, но вопрос в том, как это возможно?

Answer 1

Проблема решена.Проблема заключалась в том, что в Edge возникла проблема с отображением svg, когда вы используете теги непосредственно в атрибутах.Таким образом, решение было заменить и преобразовать строку в JS.Я создал функцию для генерации атрибута SVG для изображения из запроса ajax, когда у вас есть строка SVG:

function fixSVGDiagram(svgString)  {
    svgString = svgString.replace("<![CDATA[", "").replace("]]>", ""); //If styles occured, Edge crashes on that

    svgString = svgString.replace(/#/g,"temporaryhash") //Because of hasthag issues (in styles)

    svgString = encodeURI(svgString) //Magic  happens

    svgString = svgString.replace(/temporaryhash/g, "%23") //Get back  hashtag

    return "data:image/svg+xml;charset=utf-8," + svgString
}

Если вы загружаете SVG как атрибут в запросе ajax, то вы можете сохранить его как строку:

svgData = (new XMLSerializer).serializeToString(responseData);

, а затем

var  img = new Image
img.src = fixSVGDiagram(svgData)

и вы можете поместить изображение в нужное вам место.

Answer 2

код SVG не работает, как это для изображения SVG.Без использования тега изображения вы можете напрямую использовать тег svg в HTML-коде.ИЛИ.

Вы можете создать файл SVG с расширением * .svg и указать имя файла в качестве src в атрибуте изображения.