Question

我一直在阅读有关此问题的信息。根据我在这里看到的其他答案以及Firefox的旧错误报告，我尝试了几种不同的解决方案，但没有一个起作用。

站点为https://www.battlepac.com，在桌面版Chrome浏览器中，d3生成的水平条形图按预期在轴上显示图像，但在任何其他浏览器中和iOS上均未显示。

生成该轴图像的代码段为：

svg.selectAll("image")
    .data(data)
    .enter()
    .append("image")
    .attr("class", "bar_image")
    .attr("y", function(d) {
            return yScale(d.candidate)+yScale.bandwidth()/2 - 14;
        })
    .attr("x", "0")
    .attr('href', function(d){
            var img_path = "https://www.battlepac.com/static/images/candidate_images/"+d.candidate+".png";
            console.log(d.candidate);
            return img_path;
        })
    .attr("length", "28px")
    .attr("width", "28px");

因此，它只是将这些图像附加到已经存在的SVG上-奇怪的是，其余SVG可以正常显示（所有矩形和标签等...）

另外。在Flask模板中需要时，图像会显示在其他位置。只是非桌面Chrome上的SVG元素不起作用。

我尝试从'xlink：href'属性更改为'href'，并使用图像的完整路径而不是本地路径，但是这些都不起作用。

有人对我如何显示这些图像有任何想法吗？

谢谢

Answer 1

尝试添加.attr("height", "28px")

Firefox需要两个图像大小。

iOS，Safary要求-xlink:href

SVG <image>元素未在Firefox，Safari，iOS上显示

1 个答案: