什么可能会阻止 .svg 文件导入 .php 文件的 <section> 标签？

Question

在整理网页时，我在尝试包含的 SVG 文件时遇到了一些问题。

当我将代码直接输入到我的 .php 文件的部分标签中时，SVG 工作正常，但这并不理想，因为我打算附加一个 if 语句来确定将显示哪个 SVG 文件，在几个选项中.

所以我的想法是将每个不同的 SVG 设计存储在其自己的 .svg 文件中会更容易，但是当我指向该文件时，我在运行代码时会在网页上收到相同的错误消息。 这是错误：ERROR（我已经解决了错误并更改了第 6 行的内容，但没有成功）

我在网上找到了关于这个主题的文章，其中一些已经过时了 7-8 年。确实有用的文章提供了 3 个选项。

1. 使用对象标签。 这是我的第一选择，因为我想通过 JS 与 svgs 对象进行交互，我可以在网上找到的信息说这是最好的方法。

这个选项不起作用，给出了我分享的上述错误。 以下是来自 .php 页面的代码：

<section id="section-shape-1" class="">
 <object type="image/svg+xml" data="circles16.svg" width="66%" height="100vh" border="1">
    </object></section>

这是 SVG 代码（位于 .svg 文件中）：

<svg id="group1" width="66%" height="100vh" viewBox="0 0 700 666">

<circle id="circle0" class="circle" cx="170" cy="125" r="20" fill="#1dacf9" stroke="black" stroke-width="2" onclick="changeColor()"/> </svg>

1. 使用 iFrame。

我尝试使用 iFrame 标记，违背了我阅读的论坛的一些建议，但事实证明这会产生与以前相同的错误消息。

1. 使用 IMG 标签。

这在列表的底部，纯粹是因为我正在阅读的信息表明此选项意味着我无法通过 JS 进行交互。 无论如何，它仍然没有工作。

我尝试过的其他事情包括更改我希望导入的文件顶部的 DOCTYPE，但没有成功。 还尝试将文件的扩展名从 .svg 更改为 .xml，但这些都不起作用。

现在我希望有人能在我出错的地方出现，任何建议都会很棒，因为到目前为止我尝试的一切都没有奏效。

Answer 1

您的 SVG 上缺少 xmlns（xml 命名空间）属性。

<svg xmlns="http://www.w3.org/2000/svg" id="group1" width="66%" height="100vh" viewBox="0 0 700 666">
    <circle id="circle0" class="circle" cx="170" cy="125" r="20" fill="#1dacf9" stroke="black" stroke-width="2" onclick="changeColor()"/>
</svg> 

嵌入时，如果没有此图像，则图像不会在浏览器中呈现为 SVG。 Here is a relevant SO answer with more information.