打印使用mix-blend-mode multiply的SVG

Question

我有一个使用mix-blend-mode: multiply的svg。此svg是使用JS在浏览器中以编程方式生成的。

   <svg ref="svgElement" version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
      <circle cx="50" cy="50" r="40" stroke-width="4" fill="green" style="mix-blend-mode: multiply;" />
      <circle cx="75" cy="75" r="40" stroke-width="4" fill="red" style="mix-blend-mode: multiply;" />
      <circle cx="100" cy="50" r="40" stroke-width="4" fill="blue" style="mix-blend-mode: multiply;" />
    </svg>

我可以在浏览器中下载此svg，并希望将该svg文件发送到打印机(专业打印公司)，但当他们在Illustrator或Photoshop等中打开文件时，倍增效果不会保留。

有没有办法在客户端克服这个问题。我想也许svg可以被展平。这能行得通吗？

任何帮助都将不胜感激。

谢谢,

Answer 1

您可以尝试重新转换为只使用SVG1.1功能-混合-混合-模式是新的，我猜Adobe工具还没有正确地呈现它。

所以就像这样：

​

   <svg ref="svgElement" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
   <defs>
      <circle id="circ1"cx="50" cy="50" r="40" stroke-width="4" fill="green"/>
      <circle id="circ2" cx="75" cy="75" r="40" stroke-width="4" fill="red"/>
      
   <filter id="circle-blend" filterUnits="userSpaceOnUse" x="0" y="0" width="500" height="500" color-interpolation-filters="sRGB">
      <feImage xlink:href="#circ1" result="circleInOne"/>
      <feImage xlink:href="#circ2"/>
      <feBlend mode="multiply" in2="circleInOne"/>
      <feBlend mode="multiply" in2="SourceGraphic"/>
   
   </filter>
   </defs>
      
      <circle filter="url(#circle-blend)" cx="100" cy="50" r="40" stroke-width="4" fill="blue"/>
    </svg>

​