使用 D3.js 插入本地 SVG 图像答案

【问题标题】：Insert local SVG image using D3.js使用 D3.js 插入本地 SVG 图像
【发布时间】：2018-12-13 09:33:29
【问题描述】：

我可以使用 D3.js 使用 URL 轻松插入 SVG 图像，如下所示：

var img = g.append("svg:image")
    .attr("xlink:href", "http://www.clker.com/cliparts/1/4/5/a/1331068897296558865Sitting%20Racoon.svg")
    .attr("width", 200)
    .attr("height", 200)
    .attr("x", 228)
    .attr("y",53);

但是，我在网上到处查看并尝试了所有我能想到的方法，我无法使用本地图像参考（绝对或相对路径）做同样的事情，这让我发疯.

【问题讨论】：

标签： javascript d3.js svg

【解决方案1】：

我的版本（工作）：

CSS：

   iframe {
     top: 0;
     left: 0;
     height: 200px;
     width: 200px;
     border-width: 0px;
     /* background-color: #B0B0B0; */
     border: none;
    }

JS：

(function () {
  // Prevent White Flash While iFrame Loads. Prevent variables from being global.
  // 1. Inject CSS which makes iframe invisible 
  var div = document.createElement('div'),
      ref = document.getElementsByTagName('base')[0]
         || document.getElementsByTagName('script')[0];
    div.innerHTML = '&shy;<style> iframe { visibility: hidden; } </style>';
    ref.parentNode.insertBefore(div, ref);
  // 2. When window loads, remove that CSS, making iframe visible again
    window.onload = function() {
      div.parentNode.removeChild(div);
    }
})();

HTML：

<iframe src="image\hour-glass.svg" scrolling="no" align="bottom"></iframe>

【讨论】：

【解决方案2】：

可能有用的 SO 链接 Javascript d3 insert image from local file

【讨论】：

我已经尝试过这个问题的行：.attr("xlink:href", function() {return "file://C:/Users/Bryant/Documents/GitHub/ACT /static/js/images/testimage.png"}) 但没有成功