Html 自动关闭svg元素

我最近创建了一个svg元素，它在本地使用自动关闭标记，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 25px; width: 300px; display: inline-block;">
  <circle cx="10" cy="10" r="4" stroke="black" stroke-width="1" fill="none" />
  <line x1="14" y1="10" x2="286" y2="10" stroke-width="2" stroke="black" />
  <circle cx="290" cy="10" r="4" stroke="black" stroke-width="1" fill="none" />
</svg>

但是当在生产服务器上渲染时，所有内容都嵌套在一起。第一个圆正确嵌套在svg元素中，但行嵌套在第一个圆中，第二个圆嵌套在行中。结束结束标记行如下所示：

我必须更改svg元素以使用结束标记，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 25px; width: 300px; display: inline-block;">
  <circle cx="10" cy="10" r="4" stroke="black" stroke-width="1" fill="none" ></circle>
  <line x1="14" y1="10" x2="286" y2="10" stroke-width="2" stroke="black" ></line>
  <circle cx="290" cy="10" r="4" stroke="black" stroke-width="1" fill="none" ></circle>
</svg>

---

无论我看到哪里，它都表明svg元素上的结束标记是可选的。给出了什么？

如您所见，您的初始标记没有问题：，因此我相信这是您服务器的mime类型

阿帕奇： 尽管自版本1.3.x以来，默认情况下，ApacheWeb服务器中支持的MIME类型列表中包含了SVG MIME类型，但可能需要更新旧版本

.htaccess

也许设置正确MIME类型的最简单方法是使用.htaccess文件。这是一个经常隐藏的配置文件。如果您的服务器没有这样的文件，请创建一个文件并将其命名为.htaccess，并将SVG文件扩展名与正确的MIME类型相关联；如果文件已经存在，只需向其中添加正确的条目即可。应添加的特定行包括：

AddType image/svg+xml svg
AddType image/svg+xml svgz

---

阅读更多和其他服务器：

您在哪里测试的？在web浏览器中，在HTML模式下？您的生产服务器是apache吗？我想知道您是否需要配置mime类型。在您的.htaccess中，您可以尝试添加像AddType image/svg+xml svg svgz AddEncoding gzip svgz这样的内容，无论是在本地还是在生产中，我都在谷歌浏览器中查看了它。我们将AWS ec2实例用于生产服务器。Linux盒子。