我遇到了SVG标签有时不显示的问题。我刷新页面，它似乎没有;我似乎又清醒了两次;我再次刷新，它似乎不再。我有一个小的研究，我已经得到，我需要添加延迟属性到脚本标签。(所以，我认为这是一个源于脚本在页面完全加载之前执行的问题。)
现在我将NodeJs添加到项目中，我已经开始再次得到这个问题。我试图通过app.get()方法(express)和fs模块发送HTML文件，两者都不起作用。我该如何解决这个问题?
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}.`)
})
我使用SVG的那部分代码(我将它们用作边框)
<button data-title="Add">
<svg xmlns="http://www.w3.org/2000/svg">
<rect pathLength="305"></rect>
</svg>
</button>
CSS部分(CSS在另一个文件中)
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;
}
}
关于使用<rect/>元素的更多信息，我推荐MDN SVG教程;这是一个非常棒的资源:https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes
下面是使用<rect/>svg元素的HTML片段:
文件:index . html
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100"/>
</svg>
</body>
</html>
我相信你看到的问题是你没有指定矩形的高度和宽度，所以没有呈现任何东西。我也不熟悉pathLength属性，但您可能不需要它。
请让我知道这是否有帮助^^