使用 Nodejs 时，SVG 标签有时不会出现答案

【问题标题】：SVG tags don't seem sometimes while working with Nodejs使用 Nodejs 时，SVG 标签有时不会出现
【发布时间】：2021-11-11 14:52:49
【问题描述】：

我遇到了 SVG 标签有时不显示的问题。我刷新页面，似乎没有；我似乎又刷新了两次；我再次刷新，它似乎不再。我进行了一些研究，发现我需要将 defer 属性添加到 script 标签。（所以，我认为这是一个问题源于脚本在页面完全加载之前执行。）

现在我将 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;
            }
        }

【问题讨论】：

您提供什么内容类型？ text/html 或 application/svg+xml?
如果你的意思是我在 writeHead 方法中写的内容类型的值，它是 text/html @HeikoTheißen
您的 rx 需要单位，因为您通过样式定义它。否则一切看起来都很好。
我现在添加了它，但没有任何改变@RobertLongson
大概是因为您只是在 Chrome 中进行测试。

标签： javascript node.js express svg fs

【解决方案1】：

我会推荐 MDN SVG 教程以获取有关使用 <rect/> 元素的更多信息；这是一个很棒的资源：@987654321@

下面是使用<rect/> svg 元素的 HTML 的 sn-p：

文件：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 属性也不太熟悉，但你可能不需要它。

如果有帮助请告诉我^^

【讨论】：

我已经在 CSS 文件中指定了高度和宽度。
我见过当 HTML 嵌入到 SVG 元素中时 SVG 不呈现的情况。这可能是这种情况吗？例如，如果您在上面的 sn-p 中添加了<div>TEST</div>，则 SVG rect 将不再显示。
但是SVG标签中没有HTML？
我没有看到答案的那部分。 parhLength 属性让我可以指定边框的总长度，因此我可以让我在 stroke-dashArray 中指定的度量重复特定的次数，而不是保持未完成的状态。欲了解更多信息：developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength