I had a problem with SVG tags not displaying sometimes. I refresh the page, it doesn't seem; I refresh two more times, it seems; I refresh again and it doesn't seem again. I had a little research and I've got that I need to add defer attribute to the script tag. (So, I think it was a problem that originated from the script's being executed before the page fully loaded.)

Now I add the NodeJs to the project and I've started to get this problem again. I've tried to send the HTML file by both app.get() method (express) and fs module, both don't work. How can I fix this problem?

My NodeJs code:

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}.`)
})

The part of the code I use SVG (I use them as a border)

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

The CSS part (CSSs are in another file)

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