0

我一直在尝试通过使用 d3 操作 SVG 属性来创建 SVG。我的目标是在较大的矩形上放置一个较小的矩形，并使用搬运工 duffs“dst-out”合成目的地。不幸的是，我尝试的示例在我的浏览器中不起作用。不确定是不是因为 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");

任何导致解决方案的帮助将不胜感激。提前致谢。

4

3 回答 3

1

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

正如您现在所知道的，您的浏览器可能不支持您认为的那样。在这篇博文的末尾有一个很好的浏览器兼容性综述，并且在这个测试页面上有一个功能的视觉检查。

于 2013-06-04T13:12:40.460 回答
1

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

于 2013-06-04T19:42:38.530 回答
0

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

于 2013-06-12T08:43:54.743 回答