Skip to main content
Added another suggestion.
Source Link
TunaMaxx
  • 2.1k
  • 1
  • 12
  • 17

Unfortunately, Photoshop's blend modes let you do a lot of cool things that you find you just can't do in other places, such as CSS, SVG graphics, etc. Generally you'll find the awesome Multiply mode bites you the most in these situations.

Is the artwork shown the actual question? Unless SVG has the concept of 'overprint' (which is kind of what 'multiply' is) I think you're stuck chopping the artwork up into an extra piece and manually coloring the overlapped section.

You could also try multiple layers of say, the red bar. Have one on the bottom of the stack, with no transparencies or affects. Then pile on the blue one. Then pile on another red one, on top and mess around with transparency settings on the top red one. With the fully 'opaque' red one on the bottom of the stack, the changes you make to the top red bar should only affect the area where the blue bar interacts.

Unfortunately, Photoshop's blend modes let you do a lot of cool things that you find you just can't do in other places, such as CSS, SVG graphics, etc. Generally you'll find the awesome Multiply mode bites you the most in these situations.

Is the artwork shown the actual question? Unless SVG has the concept of 'overprint' (which is kind of what 'multiply' is) I think you're stuck chopping the artwork up into an extra piece and manually coloring the overlapped section.

Unfortunately, Photoshop's blend modes let you do a lot of cool things that you find you just can't do in other places, such as CSS, SVG graphics, etc. Generally you'll find the awesome Multiply mode bites you the most in these situations.

Is the artwork shown the actual question? Unless SVG has the concept of 'overprint' (which is kind of what 'multiply' is) I think you're stuck chopping the artwork up into an extra piece and manually coloring the overlapped section.

You could also try multiple layers of say, the red bar. Have one on the bottom of the stack, with no transparencies or affects. Then pile on the blue one. Then pile on another red one, on top and mess around with transparency settings on the top red one. With the fully 'opaque' red one on the bottom of the stack, the changes you make to the top red bar should only affect the area where the blue bar interacts.

Source Link
TunaMaxx
  • 2.1k
  • 1
  • 12
  • 17

Unfortunately, Photoshop's blend modes let you do a lot of cool things that you find you just can't do in other places, such as CSS, SVG graphics, etc. Generally you'll find the awesome Multiply mode bites you the most in these situations.

Is the artwork shown the actual question? Unless SVG has the concept of 'overprint' (which is kind of what 'multiply' is) I think you're stuck chopping the artwork up into an extra piece and manually coloring the overlapped section.