制作一个在本地显示 svg 的 html 或 xhtml 页面答案

【问题标题】：Make a html or xhtml page with svg displayed in local制作一个在本地显示 svg 的 html 或 xhtml 页面
【发布时间】：2023-04-06 15:10:01
【问题描述】：

我有一个带有 svg 的 html 页面。我在 Mac OS 中使用Chrome 54.0.2840.98 (64-bit) 作为网络浏览器。

svg 在 localhost 中显示良好，而当我在浏览器路径中指定 file:///Users/softtimur/... 时不显示。

我搜索了一些帖子，有人建议将页面更改为xhtml，我做到了。并制作如下标题：

<html xmlns="http://www.w3.org/1999/xhtml">
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />

但是 svg 仍然没有在本地显示。

有人可以帮忙吗？

PS：Here 是文件。下载后可能需要把名字test.xhtml.txt改成test.xhtml。

编辑：This thread 提到 Chrome may block the access to local documents (Object in your case) from remote scripts (svg-pan-zoom)。有没有办法重写页面以找到解决方法？或者我可以对 Chrome 设置做些什么吗？我真的不想用localhost。

【问题讨论】：

请显示整个文件。它是一个包含
我刚刚上传了一个文件，请看OP。
如果我在本地有可用的 D3 脚本，则上传的文件可以正常工作。即在同一文件夹中有 d3 文件并使用 <script src="d3.v3.min.js"></script>。我也没有看到它加载了任何可能导致跨源问题的外部资源。我可以看到包含 3 个带有两个箭头的点的 svg 对象。如果不是这种情况，控制台日志中是否有任何错误？
确实...实际上，如果我们想使用外部d3，应该添加http://。因此，通过使用<script src="http://d3js.org/d3.v3.min.js"></script>，没有<html xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> 的html 文件已经可以工作了...谢谢...

标签： html google-chrome svg xhtml localhost

【解决方案1】：

首先。
SVG 的 Doctype 不会以 html 开头。
svg 文档类型是

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

这里是“Doctype's”的链接 [https://www.w3.org/QA/2002/04/valid-dtd-list.html][1]。

您能否通过双击文件进行另一项测试，例如从文件夹打开 SVG 文件，如果是 windows，然后是 windows 资源管理器。它应该在您的默认网络浏览器中打开。

我在打开文件“file:///”时没有看到这个，而是看到像这样的驱动器“C:/”。

【讨论】：

抱歉，我忘了说我使用的是 Mac OS...双击Finder 中的文件确实会在我的默认网络浏览器（即 Chrome）中打开链接，而 svg 不是显示。

【解决方案2】：

正如我和Chainat 发现的（在cmets 中），如果想使用外部d3，关键是写<script src="http://d3js.org/d3.v3.min.js"></script>（超过<script src="d3js.org/d3.v3.min.js"></script>）。那么即使是没有<html xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> 的html文件也可以...

【讨论】：