当前用于在网络浏览器中制作“交互式 SVG”的库实际上是使用 javascript 动态地操作页面中的 svg 对象，但实际上并没有在 svg 标签本身中嵌入动画 SVG 所需的完整 javascript。 d3.js、protovis、svg.js 等库
但是可以创建独立的交互式 SVG，例如 Brendan Gregg 的火焰图工具，示例: http://www.brendangregg.com/FlameGraphs/cpu-bash-flamegraph.svg
有什么方法可以在网页中创建独立的交互式 SVG 吗？当然，您可以在服务器端生成交互式 SVG(例如，Brendan 使用 Perl 库生成交互式 SVG)，然后将其提供给用户。但我更愿意将 SVG 生成为生成网页本身的一部分，即在 Php 或 Ruby 中，或者更好的是，在客户端使用 Javascript 库。无论哪种情况，关键功能目标都是能够右键单击下载定制的交互式 SVG。
注意:d3.js 方法的好处是动画可以集成在页面上的 SVG 和其他 DOM 元素之间，或者与 SVG 交互触发动态 AJAX 请求。我不希望独立的 SVG 能够做这些事情。
最佳答案
如评论中所述，您可以将交互式 SVG 内联到 src= 中的 <embed>使用 data: 的 DOM 元素网址。
不幸的是，当前的网络浏览器没有右键单击 -> 下载 <embed>元素，仅适用于 <img>标签。我们不能使用 <img>因为出于安全原因，该标记不会在 SVG 中运行 javascript 代码。
幸运的是，我们可以使用 javascript 破解我们自己的下载链接，如下所示:
<embed class="mygraph" src="data:image/svg+xml;utf8, ... svg code ...>
<a download class="downloadLink">Download this graph.</a>
<script>
document.querySelector(".downloadLink").href = document.querySelector(".mygraph").src;
</script>
如果您尝试使用此技术使用流行的库(如 d3.js)制作独立的 SVG，您将需要更改一些特定于浏览器的内容以在 SVG 上下文中工作。在独立的 SVG 中使用 d3.v5.js 需要大约 4 行代码更改而不会出错。
你可以在这里看到一个例子: https://github.com/bjmnbraun/d3-standalone
关于javascript - 有没有办法在网页中制作交互式独立 SVG？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57829758/