在SVG中与D3合成 [英] Compositing in svg with D3

问题描述

我一直在尝试通过使用d3操纵SVG属性来创建SVG.我的目标是在较大的矩形上放置一个较小的矩形，并使用搬运工"dst-out"组合目的地.不幸的是，我尝试的示例在我的浏览器中无法正常工作.不确定是否是因为SVG规范.这是我一直在弄乱的代码

I have been trying to create an SVG by manipulating SVG properties using d3. My objective is to place a smaller rectangle over bigger one and composite the destination using porter duffs "dst-out". Unfortunately the examples I tried are not working in my browser. Not sure if it's because of the SVG spec. Here is the code that I have been messing around with

    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");

任何有助于解决方案的帮助将不胜感激.预先感谢.

Any help leading to a solution would be appreciated. Thanks in advance.

推荐答案

我发现了我的问题的脆弱解决方案.到目前为止，执行此类操作的最佳方法是使用服务器(我正在使用节点js)，并使用 SVGSalamander .在将其转换为Graphics2d之后，我们将获得一整套选项-加，减等.之后，再次使用节点java

I have found a fragile solution to my question. The best method I have found so far to execute such kind of operations is to use a server (I'm using node js) and convert SVG to Graphics2D using SVGSalamander. After it's converted to Graphics2d, we have a whole array of options - add, subtract, etc. After this again render it to SVG using Batik. This seems to working for me and currently the best solution I have found. Additionally you can automate this whole process by using node java

这篇关于在SVG中与D3合成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！