与D3合成svg

我一直在尝试通过使用d3操纵SVG属性来创建SVG。我的目标是在一个较大的矩形上放置一个较小的矩形，并使用porter duffs“dst-out”来合成目的地。不幸的是，我试过的examples没有在我的浏览器中工作。不确定是否因为SVG规范。这里是我一直在搞的代码与D3合成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");

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

来源

2013-06-04 Sai

自动完成整个过程如果这些示例在您的浏览器中不起作用，那么您将无法使它与D3一起工作。 –

我已经找到了解决脆弱我的问题的唯一途径 -

来源

2013-06-12 08:43:54 Sai

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

正如你现在可以告诉你的浏览器可能不支持你所认为的那样。在这个blog post的末尾有一个很好的浏览器兼容性总结，并且在这个test page有一个视觉检查功能。这是你能使用合成在SVG 1.1

来源

2013-06-04 13:12:40

非常感谢链接，绝对比维基百科版本更好地显示支持什么:-) – Sai

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

来源

2013-06-04 19:42:38

SVG过滤器像feComposite和其他人只能掩盖原始的SVG。我不认为它可以通过执行搬运工duff操作来改变原始的SVG。 – Sai

我的意思是说，使用过滤器会给你做这样的操作的效果，就像在[this]中一样（http://tavmjong.free.fr/INKSCAPE/MANUAL/images/FILTERS/Filters_Composite.svg），但是原始的SVG形状不变。如果它是一个矩形，它仍然是一个带有一些滤镜效果的矩形。我想要的是把它从其中减去另一个矩形后变成一条路径。 – Sai

是的，你完全正确。如果你想有一个路径对象后来使用，那么这不会做到这一点。 –

回答

相关问题