Question

我正在使用visjs库，并通过svg标签使用自定义html渲染节点。

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

我遇到的问题是尝试将图像添加到div内部的svg上。

您可以在我的proj的“ app \ app \ vis”文件夹中看到vis.component.ts及其关联的html视图文件。

在drawSvgNetwork()函数中，您将看到我在哪里构建svg。我以为我可以用<i>添加一个background-image url标签，但是当visjs渲染节点时它似乎没有渲染

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>';

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

。

*供参考：

完整的在线示例位于：http://visjs.org/network_examples.html 具体的演示页面在这里（查看源代码以查看js代码）：http://visjs.org/examples/network/nodeStyles/HTMLInNodes.html

Answer 1

就像visjs一样，无法在SVG内部加载外部图像，也无法在<foreignObject>标记中加载外部图像。这是GitHub上该问题的一个未解决问题：Image tag is not loading inside the svg

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

可以在同一线程中找到一种解决方法（但可能不适合您）：想法是分别加载图像并将其呈现为dataUrl

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

<Image>

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

  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;
        })
  }

这里是更正后的项目https://stackblitz.com/edit/visjs-with-angular-m63jme（我还用另一个任意的svg替换了原始项目中使用的svg文件，该文件包含一个US标志，以避免出现FF问题，请参见下文）

FF在画布上渲染svg的问题

当文件包含以百分比指定的'<i style="background-image: url(' + dataUrl + '); display: inline-block; width: 40px; height: 20px; background-size: contain;"></i>' +和width属性时，Firefox在画布上呈现svg文件时会遇到一些问题。有关更多详细信息，请参见SO问题：1，2。因此，请务必使用具有height和width属性（而不是百分比）的svg。

visjs库-使用svg和自定义html渲染节点网络

1 个答案:

FF在画布上渲染svg的问题