'punch out' transparent path on svg background

Question

I have an svg defining a path drawn on a transparent background -- a pretty basic svg.

I need to convert this svg so that the background is white and the text is transparent and cutout of the white background. I have been playing around with clip-path but to no avail. How is the right way to make this modification?

<svg width="138" xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 138 40">
<g transform="translate(2 30)">
<path d="m6.12,0 5.88,0 0-2.46-.6,0-2.535-9.21-5.46,0-2.535,9.21-.6,0 0,2.46 5.13,0 0-2.46-.9,0 .24-1.2 2.025,0 .255,1.2-.9,0 0,2.46m-.435-8.235 .15,0 .615,2.985-1.38,0 .615-2.985"/>
<path d="m12.3696-9.21 .66,0 0,6.75-.66,0 0,2.46 4.77,0 0-2.46-.66,0 0-9.21-4.11,0 0,2.46"/>
<path d="m17.5552-5.88 .66,0 0,3.42-.66,0 0,2.46 5.28,0 0-2.46-1.17,0 0-3.42 1.17,0 0-2.46-1.17,0c0-.63 .255-.87 1.035-.87 .735,0 1.47,.075 1.47,.075v-2.355c0,0-.78-.39-2.43-.39-2.205,0-3.495,1.035-3.495,3.54h-.69v2.46"/>
<path d="m28.518,0 4.11,0 0-2.46-.66,0 0-2.46c0-2.415-.945-3.63-4.155-3.63-2.385,0-4.155,.525-4.155,.525v2.58c.99-.225 2.295-.435 3.48-.435 1.125,0 1.38,.3 1.38,.87-3.735,0-5.4,1.02-5.4,2.88 0,1.515 1.065,2.34 2.775,2.34 1.44,0 2.25-.75 2.625-1.23v1.02m0-3.42c0,.645-.33,.96-.915,.96-.57,0-.825-.135-.825-.48 0-.48 .675-.57 1.74-.57v.09"/>
<path d="m41.9899-2.685c-.75,0-.93-.285-.93-.885h-3.3v2.97c0,0 1.815,.81 4.695,.81 3.21,0 4.95-1.29 4.95-3.855 0-2.58-1.935-3.375-4.26-4.125-.615-.195-.93-.3-.93-.645 0-.42 .27-.57 .93-.57 .465,0 .825,.18 .825,.75h3.15v-2.685c0,0-1.485-.96-4.38-.96-3.84,0-5.115,1.38-5.115,3.615 0,2.34 1.44,3.135 4.41,4.245 .705,.255 .87,.465 .87,.735 0,.39-.255,.6-.915,.6"/>
<path d="m47.8481-9.21 .66,0 0,6.75-.66,0 0,2.46 4.77,0 0-2.46-.66,0 0-9.21-4.11,0 0,2.46"/>
<path d="m58.2837,0 4.11,0 0-2.46-.66,0 0-2.46c0-2.415-.945-3.63-4.155-3.63-2.385,0-4.155,.525-4.155,.525v2.58c.99-.225 2.295-.435 3.48-.435 1.125,0 1.38,.3 1.38,.87-3.735,0-5.4,1.02-5.4,2.88 0,1.515 1.065,2.34 2.775,2.34 1.44,0 2.25-.75 2.625-1.23v1.02m0-3.42c0,.645-.33,.96-.915,.96-.57,0-.825-.135-.825-.48 0-.48 .675-.57 1.74-.57v.09"/>
<path d="m66.9288-11.67-4.11,0 0,2.46 .66,0 0,6.75-.66,0 0,2.46 4.11,0 0-1.02c.375,.48 1.185,1.23 2.325,1.23 2.07,0 3.075-1.62 3.075-4.38 0-2.76-1.005-4.38-3.075-4.38-1.14,0-1.95,.75-2.325,1.23v-4.35m1.74,8.25c0,.675-.3,.96-.87,.96-.57,0-.87-.285-.87-.96v-1.5c0-.675 .3-.96 .87-.96 .57,0 .87,.285 .87,.96v1.5"/>
<path d="m83.0515-2.46c-.675,0-1.02-.33-1.02-1.11v-4.53c0-.78 .345-1.11 1.02-1.11 .675,0 1.02,.33 1.02,1.11v4.53c0,.78-.345,1.11-1.02,1.11m5.73-3.375c0-4.38-2.235-6.045-5.73-6.045-3.495,0-5.73,1.665-5.73,6.045 0,4.38 2.235,6.045 5.73,6.045 3.495,0 5.73-1.665 5.73-6.045"/>
<path d="m94.4339,0 4.77,0 0-2.46-.66,0 0-2.46c0-2.505-1.02-3.63-2.655-3.63-1.35,0-2.055,.75-2.535,1.23v-1.02h-4.11v2.46h.66v3.42h-.66v2.46h4.77v-2.46h-.66v-2.46c0-.675 .3-.96 .87-.96 .57,0 .87,.285 .87,.96v2.46h-.66v2.46"/>
<path d="m103.732-8.55c-2.775,0-4.53,1.455-4.53,4.38 0,2.925 1.755,4.38 4.53,4.38 2.385,0 3.735-.75 3.735-.75v-2.4c-.72,.24-1.86,.48-3.18,.48-1.05,0-1.425-.36-1.425-1.08v-.09h4.86v-1.08c0-1.89-.915-3.84-3.99-3.84m0,2.67c.57,0 .87,.285 .87,.96v.09h-1.74v-.09c0-.675 .3-.96 .87-.96"/>
</g>
</svg>

Answer 1

Try using a mask instead of a clip path.

<mask id="m"> ... </mask>

Inside the mask, create a white rectangle, followed by (under) your black paths. The brightness of different areas of the mask determines the opacity of the corresponding areas of the element the mask is applied to, with white areas being fully opaque and black areas being fully transparent.

<rect width="100%" height="100%" fill="white" />
<g transform="translate(2 30)"> ... </g>

After the mask, add another rectangle and set its mask attribute to your mask. This rectangle is the white background you wanted, so give it a white fill.

<rect width="100%" height="100%" fill="white" mask="url(#m)" />

This should give you the effect you want. Check out this fiddle: http://jsfiddle.net/9tT6T/