Создайте фоновое изображение из векторного документа в CorelDRAW. Каждый компонент, на который вы хотите включить dropshadow, должен быть его собственным объектом (или группой объектов).
Rasterize.
Теперь у данной части изображения есть dropshadow. Rastersize. Повторите, давая каждому полезное имя.
Производите разницу между исходным изображением и изображениями вышивки. Один из способов может заключаться в том, чтобы исходное изображение было обработано с помощью изображений dropshadow. Другим может быть обратное альфа-объединение их.
Большая часть различий должна быть равна нулю. Удалите прямоугольник из изображений diff.
Теперь, в CSS, когда вы хотите, чтобы dropshadow отображалась, используйте противоположный режим смешивания операции, которую вы использовали для создания diff. Если вы использовали xor для выполнения diff, используйте xor между diff-изображением и оригиналом. Если вы использовали обратный альфа-композит, используйте альфа-композицию.
Я не эксперт в отношении того, как работает css3 blending, вам нужно поэкспериментировать с тем, какой режим diff и какой режим наложения использовать.
Вы также можете просто поменять местами между изображениями.
Это невозможно в CSS или HTML и было бы невероятно сложно в JS. Вам будет лучше просто иметь несколько версий изображения и изменить их в зависимости от области, на которой витает. Или - даже лучше, чем использовать SVG. –
Как я могу сделать это, используя одно изображение svg, которое задано как фоновое изображение? –