Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Interactive SVG Hover Effect</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 20px; | |
| background: #f8f9fa; | |
| } | |
| .svg-container { | |
| border: 1px solid #ccc; | |
| padding: 10px; | |
| border-radius: 8px; | |
| background: #fff; | |
| } | |
| .info { | |
| margin-top: 15px; | |
| font-size: 16px; | |
| color: #555; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="svg-container" id="svg-container-01"> | |
| <!-- The enhanced SVG will be injected here --> | |
| </div> | |
| <div class="info" id="info">Hover over the network elements to see their details</div> | |
| <script> | |
| // Function to enhance the SVG content by adding styles and data attributes | |
| function enhanceSVGContent(originalContent) { | |
| const parser = new DOMParser(); | |
| const doc = parser.parseFromString(originalContent, 'image/svg+xml'); | |
| // Create a style element with hover effects and insert it as the first child of the SVG | |
| const styleElement = doc.createElementNS('http://www.w3.org/2000/svg', 'style'); | |
| styleElement.textContent = ` | |
| path[data-element-type="layer"] { | |
| transition: all 0.3s; | |
| cursor: pointer; | |
| } | |
| path[data-element-type="layer"]:hover { | |
| fill: #b197fc !important; | |
| transform: translate(0, -2px); | |
| } | |
| path[data-element-type="gradient"] { | |
| transition: all 0.3s; | |
| cursor: pointer; | |
| } | |
| path[data-element-type="gradient"]:hover { | |
| fill: #f06595 !important; | |
| transform: translate(0, -2px); | |
| } | |
| path[data-element-type="forward"] { | |
| transition: all 0.3s; | |
| cursor: pointer; | |
| } | |
| path[data-element-type="forward"]:hover { | |
| stroke: #0c8599 !important; | |
| stroke-width: 4 !important; | |
| } | |
| path[data-element-type="backward"] { | |
| transition: all 0.3s; | |
| cursor: pointer; | |
| } | |
| path[data-element-type="backward"]:hover { | |
| stroke: #e8590c !important; | |
| stroke-width: 4 !important; | |
| } | |
| path[data-element-type="optimization"] { | |
| transition: all 0.3s; | |
| cursor: pointer; | |
| } | |
| path[data-element-type="optimization"]:hover { | |
| stroke: #087f5b !important; | |
| stroke-width: 4 !important; | |
| } | |
| `; | |
| doc.documentElement.insertBefore(styleElement, doc.documentElement.firstChild); | |
| // Process neural network layers (purple nodes) | |
| doc.querySelectorAll('path[fill="#d0bfff"]').forEach((node, index) => { | |
| node.setAttribute('data-element-id', `layer-${index}`); | |
| node.setAttribute('data-element-type', 'layer'); | |
| }); | |
| // Process gradient nodes (pink nodes) | |
| doc.querySelectorAll('path[fill="#f783ac"]').forEach((node, index) => { | |
| node.setAttribute('data-element-id', `gradient-${index}`); | |
| node.setAttribute('data-element-type', 'gradient'); | |
| }); | |
| // Process arrows by matching stroke colors | |
| const arrowTypes = { | |
| '#15aabf': 'forward', | |
| '#fd7e14': 'backward', | |
| '#099268': 'optimization' | |
| }; | |
| Object.entries(arrowTypes).forEach(([color, type]) => { | |
| doc.querySelectorAll(`path[stroke="${color}"]`).forEach((arrow, index) => { | |
| arrow.setAttribute('data-element-id', `${type}-${index}`); | |
| arrow.setAttribute('data-element-type', type); | |
| }); | |
| }); | |
| // Make the SVG responsive | |
| doc.documentElement.setAttribute('width', '100%'); | |
| doc.documentElement.setAttribute('height', 'auto'); | |
| doc.documentElement.setAttribute('preserveAspectRatio', 'xMidYMid meet'); | |
| return new XMLSerializer().serializeToString(doc); | |
| } | |
| // Function to load an SVG file via fetch | |
| async function loadSVG(url, containerId) { | |
| try { | |
| const response = await fetch(url); | |
| if (!response.ok) { | |
| throw new Error(`HTTP error! Status: ${response.status}`); | |
| } | |
| const svgText = await response.text(); | |
| const enhancedSVG = enhanceSVGContent(svgText); | |
| document.getElementById(containerId).innerHTML = enhancedSVG; | |
| } catch (error) { | |
| console.error('Error loading SVG:', error); | |
| document.getElementById(containerId).innerHTML = '<p>Error loading SVG.</p>'; | |
| } | |
| } | |
| // Load the SVG file (adjust the path if needed) | |
| loadSVG('figure-01.svg', 'svg-container-01'); | |
| // Set up event listeners to display a description of the hovered element | |
| const svgContainer = document.getElementById('svg-container-01'); | |
| svgContainer.addEventListener('mouseover', function(event) { | |
| const target = event.target; | |
| if (target.tagName.toLowerCase() === 'path' && target.hasAttribute('data-element-id')) { | |
| const elementId = target.getAttribute('data-element-id'); | |
| const elementType = target.getAttribute('data-element-type'); | |
| const descriptions = { | |
| layer: 'Neural Network Layer', | |
| gradient: 'Gradient Update Layer', | |
| forward: 'Forward Pass Connection', | |
| backward: 'Backward Pass Connection', | |
| optimization: 'Optimization Step' | |
| }; | |
| const description = descriptions[elementType] || elementType; | |
| document.getElementById('info').textContent = `Hovering over: ${description} (${elementId})`; | |
| } | |
| }); | |
| svgContainer.addEventListener('mouseout', function() { | |
| document.getElementById('info').textContent = 'Hover over the network elements to see their details'; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |