有没有一种方法可以在网页中制作交互式的独立SVG？

Question

当前用于在网络浏览器中制作“交互式svg”的库实际上是使用javascript来动态地操纵页面中的SVG对象，但是实际上并没有在svg标签本身中嵌入使svg动画化所需的完整的javascript。像d3.js，protovis，svg.js等库。

但是也可以创建独立的交互式SVG，例如Brendan Gregg的flamegraph工具，例如：http://www.brendangregg.com/FlameGraphs/cpu-bash-flamegraph.svg

有没有办法在网页中创建一个独立的、交互式的SVG？当然，您可以生成交互式SVG服务器端(例如，Brendan使用Perl库来生成交互式SVG)，然后将其提供给用户。但我更喜欢将生成SVG作为生成网页本身的一部分，即使用Php或Ruby，或者更好的是，使用Javascript库在客户端生成SVG。在这两种情况下，关键功能目标都是能够右键单击并下载定制的交互式SVG。

注意: d3.js方法的好处是可以在SVG和页面上的其他DOM元素之间集成动画，或者与SVG触发器动态AJAX请求进行交互。我不期望独立的SVG能够做这些事情。

Answer 1

正如注释中提到的，您可以使用<embed> URI将交互式SVG内联到data: DOM元素的src=中。

不幸的是，目前的web浏览器没有右键单击->下载<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