SVG для Интернета - можно ли использовать отсечение через CSS без clipPath?

Я не слишком хорошо разбираюсь (пока?) в использовании SVG для Интернета. Что я знаю, так это то, что простые формы лучше, чем сложные пути, если это вообще возможно (из-за простых точек по сравнению с точками пути). Из-за этого я попытался воссоздать логотип, используя очень простые контуры (эллипсы и прямоугольники, с несколькими формами контуров — скорректированные простые формы — там, где это необходимо).

Используя простые формы и релевантность порядка объектов (сверху/снизу), я могу скрыть определенные области логотипа, не прибегая к использованию контуров. К сожалению, эта затемненная область может для определенных целей быть прозрачной.

Поэтому мне интересно, возможно ли создать SVG, который использует определенные пути (простых объектов), которые можно применять в качестве обтравочных путей через объявления CSS или просто сплошной цвет, в зависимости от?

Пример:

Пример изображения

Здесь белый цвет, используемый для создания белков глаз и рта, возможно, должен быть прозрачным, обрезающим нижний желтый объект. В других случаях может потребоваться, чтобы эти объекты имели цветную заливку. В этом примере мне понадобятся два совершенно отдельных файла для решения проблемы, или это можно сделать с помощью одного файла? Если с одним файлом, мне придется вместо этого прибегать к использованию путей вместо простых фигур?

Изменить/обновить: более внимательно изучив решение, предоставленное Danielillo (и после тестирования свойства CSS clip-path), я обнаружил filterэлемент и параметры SVG. Фильтр feFlood должен предоставить возможности, о которых я изначально не знал, что я на самом деле искал.

Ответы (1)

Вот Codepen с тем же SVG в двух div:

  • Первый с обтравочной маской

  • Второй — тот же SVG с обтравочной маской, но с другой фигурой на фоне:

    <!--THIS IS THE ADDED CIRCLE-->
<circle fill="red" cx="31.8" cy="31.8" r="31.6">   
<!--END-->
Я предполагаю, что пример был недостаточно сложным, чтобы показать, что я конкретно пытался сделать, но кажется, что невозможно определить стандартные формы (путем нацеливания на их идентификатор) как обтравочную маску через CSS, это должно быть определено в XML SVG. структуру в качестве обтравочной маски. Буду ли я прав в таком предположении?
Конечно, будет решение CSS. Я не программист, но если с пятнадцати мин. У меня есть этот фальшивый трюк, хороший программист может убрать маску svg.
Дальнейшее тестирование: clip-pathэто правило CSS, которое можно использовать для применения пользовательского окна просмотра к элементу. В SVG путь отсечения должен быть определен вне нормального потока определенных видимых путей SVG (элемент <clipPath>внутри элемента SVG <defs>). Источник: sarasoueidan.com/blog/css-svg-clipping Тем не менее, ваше решение фактически дало ответ, который я действительно хотел, не зная: filter's feFlood; также определено в <def>. Это должно дать мне все, что я хотел бы сделать. Спасибо! Я обновлю свой вопрос, чтобы уточнить, почему ваш ответ правильный. 👍
На самом деле, я хотел определить правильную маску. Это было все, что мне было нужно. Тем не менее отличная информация привела меня к правильному ответу - спасибо Danielillo!
SVG для Интернета - можно ли использовать отсечение через CSS без clipPath?
СпросиСетьПолитика конфиденциальности1y, 0v