Mon 21 Jul 22:43:21 CEST 2025

2025-07-21 22:59:09 +02:00 · 2025-07-21 22:59:09 +02:00 · 573417f2a0
commit 573417f2a0
parent 08e9e8ddc5
1 changed files with 86 additions and 0 deletions
--- a/js/dos/ext/vis/examples/network/nodeStyles/HTMLInNodes.html
+++ b/js/dos/ext/vis/examples/network/nodeStyles/HTMLInNodes.html
@ -0,0 +1,86 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | HTML in nodex</title>
+
+    <style type="text/css">
+        body {
+            font: 10pt arial;
+        }
+        #mynetwork {
+            width: 600px;
+            height: 600px;
+            border: 1px solid lightgray;
+            background-color:#eeeeee;
+        }
+
+    </style>
+
+    <script type="text/javascript" src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+    <script type="text/javascript">
+        var nodes = null;
+        var edges = null;
+        var network = null;
+
+        var DIR = 'img/refresh-cl/';
+        var LENGTH_MAIN = 150;
+        var LENGTH_SUB = 50;
+
+
+        var data = '<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-size:40px">' +
+            ' <em>I</em> am' +
+            '<span style="color:white; text-shadow:0 0 20px #000000;">' +
+            ' HTML in SVG!</span>' +
+            '</div>' +
+            '</foreignObject>' +
+            '</svg>';
+
+        var DOMURL = window.URL || window.webkitURL || window;
+
+        var img = new Image();
+        var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
+        var url = DOMURL.createObjectURL(svg);
+
+        // Called when the Visualization API is loaded.
+        function draw() {
+            // Create a data table with nodes.
+            nodes = [];
+
+            // Create a data table with links.
+            edges = [];
+
+            nodes.push({id: 1, label: 'Get HTML', image: url, shape: 'image'});
+            nodes.push({id: 2, label: 'Using SVG', image: url, shape: 'image'});
+            edges.push({from: 1, to: 2, length: 300});
+
+            // create a network
+            var container = document.getElementById('mynetwork');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            var options = {
+                physics: {stabilization: false},
+                edges: {smooth: false}
+            };
+            network = new vis.Network(container, data, options);
+        }
+    </script>
+    <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body onload="draw()">
+<p>
+    This example demonstrates showing custom HTML in Nodes, by using an SVG image.
+</p>
+<p style="color: red;">
+    WARNING: this is currently not supported by all browsers.
+</p>
+<div id="mynetwork"></div>
+</body>
+</html>