javascript - vis.js 库 - 使用 svg 和自定义 html 渲染节点网络

Question

我正在使用 vis.js 库，并通过 svg 使用自定义 HTML 渲染节点标签。

我的在线项目位于:https://stackblitz.com/edit/visjs-with-angular

我遇到的问题是当我尝试将图像添加到 div 时，它在 svg 内.

你可以看到 vis.component.ts在我的项目的“app\app\vis”文件夹中，及其关联的 HTML View 文件。

在drawSvgNetwork()功能，您将看到我在哪里构建 SVG。我想我可以添加 <i>带有 background-image url 的标签, 但当 vis.js 渲染节点时它似乎没有被渲染:

var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="390" height="65">' +
          '<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#ffffff" ></rect>' +
          '<foreignObject x="15" y="10" width="100%" height="100%">' +
          '<div xmlns="http://www.w3.org/1999/xhtml" style="font-family:Arial; font-size:30px">' +
          ' <em>I</em> am' +
          '<span style="color:white; text-shadow:0 0 20px #000000;">' +            
            ' HTML in SVG!</span>' +

          // * THIS IMAGE IS NOT RENDERING * 
          '<i style="background-image: url(https://openclipart.org/download/280615/July-4th-v2B.svg);"></i>' +

          '</div>' +
          '</foreignObject>' +
          '</svg>';

即以下是运行我的在线项目时您将看到的内容。

.

*供引用:

完整的在线示例位于:https://visjs.github.io/vis-network/examples/而具体的demo页面在这里(查看源码看js代码):https://visjs.github.io/vis-network/examples/network/nodeStyles/HTMLInNodes.html

Answer 1

看起来像 visjs不可能在 SVG 中加载外部图像，也不可能在 <foreignObject> 中加载外部图像，既不在<Image>标签。这是 github 上问题的未解决问题:Image tag is not loading inside the svg

存储库的维护者 answered这是不可能的。

可以在同一个线程中找到解决方法(但它可能不适合您):想法是单独加载图像并将其渲染为 dataUrl

加载 svg 图像并将其转换为 dataUrl:

  loadImage(url) {
    const img = new Image();

    img.crossOrigin = "anonymous";
    img.src = url;

    return Observable.fromEvent(img, 'load')
        .map((e: Event) => {
            const canvas = document.createElement('canvas');
            canvas.getContext('2d').drawImage(e.target as HTMLImageElement, 0, 0);
            const dataURL = canvas.toDataURL();
            return dataURL;
        })
  }

使用获取的dataUrl作为背景，而不是直接svg文件url:

  '<i style="background-image: url(' + dataUrl + '); display: inline-block; width: 40px; height: 20px; background-size: contain;"></i>' +

这是更正后的项目 https://stackblitz.com/edit/visjs-with-angular-m63jme (我还用另一个任意 svg 替换了原始项目中使用的包含美国国旗的 svg 文件，以避免在 FF 中出现问题，见下文)

FF 在 Canvas 上渲染 svg 的问题

当文件包含 width 时，Firefox 在 Canvas 上渲染 svg 文件时会出现一些问题。和 height指定为百分比的属性。有关详细信息，请参阅 SO 问题:1 , 2 .所以一定要使用带有 width 的 svg和 height不是百分比的属性。