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。

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

Answer 1

如评论中所述，您可以使用src= URI将交互式SVG内联到<embed> DOM元素的data:中。

不幸的是，当前的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大约需要四行代码更改。

您可以在此处查看示例： https://github.com/bjmnbraun/d3-standalone

有没有办法在网页中制作交互式独立SVG？

1 个答案: