CSS or SVG text clip / mask -
i not sure if possible, there way make text clipping path or mask?
example: if there layer of text above layer of text, have top layer "knock out" lower layer background seen through. see link below (sorry, don't have enough rep yet post images), don't want border around letters, added try , describe trying achieve.
notice how bottom "this text" string has missing color top layer overlaps. top layer of text transparent "knock out" or apply transparency anywhere overlaps lower layer of text.
you can filter. ideally, we'd use 2 feimage's import source text , composite them together. firefox doesn't support yet, cross-browser, we're stuck using "green-screen" type effect , careful positioning of source text. it's a little using elephant gun kill fly. work: http://codepen.io/mullany/pen/sogvi
<svg> <filter id="knockoutspecial"> <feoffset dy="150" result="pos-text"/> <fecomposite operator="out" in2="sourcegraphic" in="pos-text" result="cut-red"/> <fecolormatrix in="cut-red" result="recolor1" type="matrix" values="0 0 0 0 1 0 0 0 0 0.0 0 0 0 0 0.1 0 0 0 1 0"/> <fecolormatrix in="sourcegraphic" result="empty-red" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 -5 0 1 0"/> <fecolormatrix in="empty-red" result="recolor2" type="matrix" values="0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0"/> <fecomposite operator="over" in="recolor1" in2="recolor2"/> </filter> <g filter="url(#knockoutspecial)"> <text x="0" y="-50" font-size="84" font-weight="bold" fill="red">cutting out text?</text> <text stroke="blue" stroke-width="2" fill="green" x="40" y="120" font-size="84" font-weight="bold" font-family="helvetica">no problem....</text> </g> </svg>
Comments
Post a Comment