Question

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

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

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

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

使用对象标签。这是我的第一选择，因为我想通过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>

使用iFrame。

我尝试使用iFrame标记，反对我读过的论坛的一些建议，这证明会产生与以前相同的错误消息。

使用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

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

1 个答案: