SVG <image> 元素未在 Firefox、Safari、iOS 上显示答案

【问题标题】：SVG <image> elements not displaying on Firefox, Safari, iOSSVG <image> 元素未在 Firefox、Safari、iOS 上显示
【发布时间】：2019-11-24 09:44:00
【问题描述】：

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

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

为轴生成图像的代码sn-p是：

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”，并使用图像的完整路径而不是本地路径，但这些都不起作用。

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

谢谢，

【问题讨论】：

标签： firefox d3.js svg safari

【解决方案1】：

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

Firefox 需要两种图像尺寸。

iOS, Safary 需要 - xlink:href

【讨论】：

这成功了！太感谢了。有时最简单的答案最难找到。
@Tyler Wood 这发生在每个人身上，我也不例外。 :-)