Как вырезать текст из формы в SVG?

Question

У меня есть файл SVG, который выглядит, как показано ниже:

Есть ли способ, чтобы сделать текст прозрачным? То есть вместо цвета заливки я хочу вырезать слои и показать, что находится в фоновом режиме (SVG, то есть все, что находится под SVG). Другими словами, сделать пересечение пути & текст прозрачным?

Содержимое файла SVG:

<svg width="36.087" height="34.314" viewBox="0 0 36.087 34.313999" x="1190.56" y="753.5780000000001"> 
    <path fill="#63a95c" d="M36.087 13.107l-13.305-.66L18.047 0l-4.742 12.446L0 13.106l10.377 8.352L6.89 34.314l11.157-7.285 11.14 7.284-3.475-12.856" fill-rule="evenodd"/> 
    <text font-size="10px" x="10.498" y="23.484" fill="#ffffff" fill-opacity="1" font-family="OpenSans-Bold">8.5</text> 
</svg> 

Я попытался изменить прозрачность элемента текста, но это влияет только на текст. Текст внутри SVG переменный заполняется динамически, поэтому я не могу «предварительно обработать» SVG-файл. Есть ли способ, возможно, используя метод evenodd или что-то подобное, чтобы создать «исключение» для пересечения? Возможно ли использование одной из библиотек SVG SVG, таких как snap.svg или svg.js?

Edit: Окончательный SVG должен выглядеть следующим образом:

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

Answer 1

Создайте маску, поместите в него текст с помощью текстового элемента, а затем использовать маску на форму, которую вы хотите обрезать отверстие в. Что-то вроде этого ...

head, body { 
 
    width:100%; 
 
    height:100%; 
 
}

<svg width="100%" height="100%" viewBox="0 0 200 200"> 
 
    <defs> 
 
    <mask id="sample" maskUnits="userSpaceOnUse"> 
 
     <rect width="100%" height="100%" fill="white"/> 
 
     <text x="12" y="23" font-size="10" font-family="Impact">9.0</text> 
 
    </mask> 
 
    </defs> 
 

 
<path fill="#63a95c" d="M36.087 13.107l-13.305-.66L18.047 0l-4.742 12.446L0 13.106l10.377 8.352L6.89 34.314l11.157-7.285 11.14 7.284-3.475-12.856" fill-rule="evenodd" mask="url(#sample)"/>