Question

直截了当的问题。我目前正在调试一个问题，尽管它能够在几乎所有其他浏览器上进行渲染，但仍无法在Edge上正确渲染：

var img = new Image();
img.onload = function() {
  console.log("succ");
}
img.onerror = function(error) {
  console.log(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的{{1}}属性如何实例化显然存在错误。但是我无法进入浏览器代码来查看为什么它不起作用。可以这样做吗？

Answer 1

在我这边测试了代码之后，看来问题出在样式中的height属性上。

尝试从此部分代码中删除height属性

div {color：white; font：18px serif; ~~高度：100％；~~ 溢出：自动；}

然后，代码如下：

<div id="target"></div>

<script type="text/javascript">
    var img = new Image();
    img.onload = function () {
        console.log("succ");
    }
    img.onerror = function (error) {
        console.log(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>

结果like this。

是否可以在Edge（或任何浏览器的）调试器中单步执行本机代码？

1 个答案: