vis.js 库 - 使用 svg 和自定义渲染节点网络 html
vis.js library - Rendering a network of nodes with svg and custom html
我正在使用 vis.js 库,并通过 svg
标签使用自定义 HTML 渲染节点。
我的在线项目位于:https://stackblitz.com/edit/visjs-with-angular
我遇到的问题是当我尝试将图像添加到 div
时,它位于 svg
.
中
您可以在我的项目的 'app\app\vis' 文件夹中看到 vis.component.ts
及其关联的 HTML 视图文件。
在 drawSvgNetwork()
函数中,您将看到我构建 SVG 的位置。我想我可以添加一个带有 background-image url
的 <i>
标签,但是当 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
看起来 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
和 height
属性时,Firefox 在 canvas 上呈现 svg 文件时存在一些问题。有关详细信息,请参阅 SO 问题:, 。所以一定要使用带有 width
和 height
不是百分比的属性的 svg。
我正在使用 vis.js 库,并通过 svg
标签使用自定义 HTML 渲染节点。
我的在线项目位于:https://stackblitz.com/edit/visjs-with-angular
我遇到的问题是当我尝试将图像添加到 div
时,它位于 svg
.
您可以在我的项目的 'app\app\vis' 文件夹中看到 vis.component.ts
及其关联的 HTML 视图文件。
在 drawSvgNetwork()
函数中,您将看到我构建 SVG 的位置。我想我可以添加一个带有 background-image url
的 <i>
标签,但是当 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
看起来 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
和 height
属性时,Firefox 在 canvas 上呈现 svg 文件时存在一些问题。有关详细信息,请参阅 SO 问题:width
和 height
不是百分比的属性的 svg。