Question

我一直试图通过使用d3操纵SVG属性来创建SVG。我的目标是在较大的矩形上放置一个较小的矩形，并使用porter duffs“dst-out”合成目的地。不幸的是，我试过的examples无法在我的浏览器中运行。不确定是不是因为SVG规范。这是我一直在搞乱的代码

    svg.append("g").attr("id","content").append("svg:rect").
        attr("x",0).
        attr("y",200).
        attr("height",100).
        attr("width", width-20).
        attr("fill", "#2d578b");

        d3.select("#chartLaser svg").select("#content").append("svg:rect").
        attr("x",-50).
        attr("y",250).
        attr("height",30).
        attr("width",80).
        attr("fill", "#FF0066").attr("comp-op","src-atop");

任何有助于解决方案的帮助都将受到赞赏。提前谢谢。

Answer 1

您引用的网站上的示例是SVG 1.2版。目前在大多数浏览器中只有SVG 1.1的基本支持。如果您点击其中任何一个图像，它会显示SVG版本（在页面上它回退到PNG）。

正如您现在所知，您的浏览器可能不支持您的想法。在blog post的末尾有一个很好的浏览器兼容性，并且可以直观地检查此test page的功能。

Answer 2

您可以使用SVG过滤器执行此操作 - 这是您在SVG 1.1中使用合成的唯一方法

Answer 3

我发现了一个脆弱的解决方案。到目前为止，我发现执行此类操作的最佳方法是使用服务器（我使用节点js）并使用SVGSalamander将SVG转换为Graphics2D。在它转换为Graphics2d后，我们有一整套选项 - 加，减等。然后再使用Batik将其渲染为SVG。这似乎对我有用，目前是我找到的最佳解决方案。此外，您可以使用node java

自动完成整个过程

使用D3在svg中合成

3 个答案: