Как я могу сделать так, чтобы обводка SVG показывала фон? ⇐ Html

[Anonymous]

У меня есть SVG с градиентным фоном и значком на переднем плане. В настоящее время значок представляет собой всего лишь один заполненный контур с полилиниями сверху, но вместо этого его можно разделить на несколько контуров, где полилиния будет обводкой. Однако я хочу, чтобы вместо того, чтобы полилиния/штрих имела цвет, отображал фон, как если бы он прорезал дыру на переднем плане. Поскольку фон представляет собой градиент (на самом деле это теневой фильтр), а не сплошной цвет, для этого я не могу просто использовать обводку того же цвета, что и фон. Я предполагаю, что результат был бы, если бы я мог иметь отрицательную ширину штриха для нескольких путей.
В качестве примера я буду использовать SVG, который на самом деле предназначен для (изображения моего профиля)
Итак, это мой текущий код SVG

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

Я бы хотел, чтобы вместо черного контура это был пробел в значке, вот так.
Конечно, для этого конкретного изображения я мог бы просто вручную создать для каждого раздела, разделенного черными контурами, собственный путь без обводки, воссоздавая эффект, но из-за того, как я использую это изображение, мне нужно, чтобы ширина обводки была переменной и имела определенную пути не позволили бы этого сделать, если бы не существовал способ автоматически генерировать эти пути в Javascript или PHP, но я не знал, как это реализовать. Единственный способ обойти это - найти центры каждой секции и увеличить серый контур, чтобы уменьшить зазор (таким образом, максимальный зазор будет иметь ширину штриха, равную 0, а минимальный зазор будет иметь ширину штриха, эквивалентную радиусу каждой секции), но в моей ситуации это все равно будет неэффективно. Так какие же альтернативы существуют?


Подробнее здесь: https://stackoverflow.com/questions/720 ... background