Печать SVG, использующая умножение в смешанном режиме - PullRequest
Новая
       45

Печать SVG, использующая умножение в смешанном режиме

0 голосов
/ 11 июня 2019

У меня есть svg, который использует mix-blend-mode: multiply.Этот 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 может быть сплющен.Может ли эта работа?

Любая помощь будет принята с благодарностью.

Спасибо,

1 Ответ

1 голос
/ 12 июня 2019

Вы можете попробовать изменить это, чтобы использовать только возможности SVG 1.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>
...