Tuve un problema con las etiquetas SVG que a veces no se mostraban. Refresco la página, no parece; Refresco dos veces más, al parecer; Vuelvo a refrescar y no me aparece de nuevo. Investigué un poco y descubrí que necesito agregar un atributo diferido a la etiqueta del script. (Entonces, creo que fue un problema que se originó porque el script se ejecutó antes de que la página se cargara por completo).

Ahora agrego NodeJs al proyecto y comencé a tener este problema nuevamente. Intenté enviar el archivo HTML mediante el método app.get() (express) y el módulo fs, ambos no funcionan. ¿Como puedo solucionar este problema?

Mi código de NodeJs:

 var http = require('http') var express = require("express") var app = express() app.use(express.static(__dirname + '/public')); app.get("/",(req,res)=>{ res.sendFile(__dirname+"/index.html") }) var port = 3000; app.listen(port,() => { console.log(`The server is initialized on port ${port}.`) })

La parte del código que uso SVG (los uso como borde)

 <button data-title="Add"> <svg xmlns="http://www.w3.org/2000/svg"> <rect pathLength="305"></rect> </svg> </button>

La parte CSS (los CSS están en otro archivo)

 button { padding: 24px 0; font-size: 1em; font-family: 'Open Sans', sans-serif !important; color:rgba(255,255,255,0.7); border:none; position: relative; outline: none; background: none; cursor: pointer; transition: 0.4s; &::after { content: attr(data-title); position: absolute; top:0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: 0.4s; } &:hover::after { text-shadow: 0 0 4px hsla(0, 0%, 100%, 0.4); } &:hover svg rect { fill: rgba(255,255,255,0.1); } svg, svg rect { position: absolute; width: 100%; height: 100%; top:0;left: 0; fill: transparent; overflow: initial; } svg rect { stroke: #fff; stroke-width: 1; stroke-dasharray: 2 4; stroke-linecap: butt; stroke-opacity: 0.8; rx: 25; transition: 0.2s; } }