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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用D3.js插入本地SVG图像相关的知识,希望对你有一定的参考价值。

我可以使用URL轻松地使用D3.js插入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);

但是,我已经在网上到处寻找并尝试了我能想到的一切,我无法使用本地图像参考(绝对或相对路径)做同样的事情,这让我发疯。

答案

我的版本(工作):

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="imagehour-glass.svg" scrolling="no" align="bottom"></iframe>
另一答案

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

以上是关于使用D3.js插入本地SVG图像的主要内容,如果未能解决你的问题,请参考以下文章

使用 d3 旋转 SVG 图像元素

SVG基础图形和D3.js

d3.js学习

D3.js 无法将背景图像添加到矩形

使用 d3.js 绑定数据内的数组(动态生成具有恒定性的 d3.svg.line)

Renderer2 在使用 d3 js - Angular 4 时不渲染 SVG 元素