Прямой вопрос. В настоящее время я устраняю проблему, из-за которой это не отображается должным образом в Edge, несмотря на то, что он может отображаться практически в любом другом браузере:
var img = new Image();
img.onload = function() {
console.info("succ");
}
img.onerror = function(error) {
console.info(error);
}
img.src = 'data:image/svg+xml;utf8,<svg viewBox = "0 0 200 200" xmlns = "http://www.w3.org/2000/svg"><style>polygon { fill: black } div {color: white;font:18px serif;height: 100%;overflow: auto;}</style><polygon points = "5,5 195,10 185,185 10,195" /><!-- Common use case: embed HTML text into SVG --><foreignObject x = "20" y = "20" width = "160" height = "160"><!--In the context of SVG embeded into HTML, the XHTML namespace couldbe avoided, but it is mandatory in the context of an SVG document--><div xmlns = "http://www.w3.org/1999/xhtml">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed mollis mollis mi ut ultricies. Nullam magna ipsum,porta vel dui convallis, rutrum imperdiet eros. Aliquamerat volutpat.</div></foreignObject></svg>'
document.getElementById("target").append(img);
<div id = "target"></div>
Когда я вхожу в код, явно возникает ошибка, связанная с тем, как создается экземпляр Image
с его свойством src
. Но я не могу войти в код браузера, чтобы понять, почему он не работает. Можно ли это как-то сделать?
🤔 А знаете ли вы, что...
JavaScript поддерживает объектно-ориентированное программирование.
После тестирования вашего кода на моей стороне кажется, что проблема связана со свойством высоты в стиле.
Попробуйте удалить свойство высоты из этой части кода.
div {color: white;font:18px serif;
height: 100%;overflow: auto;}
Затем код, как показано ниже:
<div id = "target"></div>
<script type = "text/javascript">
var img = new Image();
img.onload = function () {
console.info("succ");
}
img.onerror = function (error) {
console.info(error);
}
img.src = 'data:image/svg+xml;utf8,<svg viewBox = "0 0 200 200" xmlns = "http://www.w3.org/2000/svg"><style>polygon { fill: black } div {color: white;font:18px serif;overflow: auto;}</style><polygon points = "5,5 195,10 185,185 10,195" /><!-- Common use case: embed HTML text into SVG --><foreignObject x = "20" y = "20" width = "160" height = "160"><!--In the context of SVG embeded into HTML, the XHTML namespace couldbe avoided, but it is mandatory in the context of an SVG document--><div xmlns = "http://www.w3.org/1999/xhtml">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed mollis mollis mi ut ultricies. Nullam magna ipsum,porta vel dui convallis, rutrum imperdiet eros. Aliquamerat volutpat.</div></foreignObject></svg>'
img.style = "height :100%";
document.getElementById("target").append(img);
</script>
Результат нравится.