Как я могу использовать SVG, изображения и маски/клипы, чтобы создать это? [закрыто] ⇐ CSS

[Anonymous]

Мне нужно иметь возможность создавать этот элемент таким образом, чтобы два цветных секция можно было использовать в качестве масок/клипов для изображений, где эти изображения можно установить независимо и всегда правильно отображать (например, пользователь может загрузить квадратное изображение, и оно будет отображаться в форме «Plectrum»). Справа), а затем настраивает эти пути как значение CSS Clip Path для двух изображений. Это не сработало. < /P>
Я затем использовал три отдельных SVG (один, который представляет собой только левую «плектруму», один-средний беловой «плектр» и один только правая «плектрома»). Это не сработало.
Как только пути SVG становятся панми-клипсом, их фактическая форма, кажется, меняется!

Код: Выделить всё

[img]https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg[/img]

[img]https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg[/img]





 

Подробнее здесь: [url]https://stackoverflow.com/questions/79604848/how-can-i-use-svg-images-and-masks-clips-to-create-this[/url]