0

我有一个使用混合混合模式的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 可以展平。这能行吗？

任何帮助将不胜感激。

谢谢，

4

1 回答 1

1

您可以尝试将其重铸为仅使用 SVG 1.1 功能 - mix-blend-mode 是新的，我猜 Adob​​e 工具还没有正确渲染它。

所以像：

   <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>

于 2019-06-11T23:12:00.203 回答