.container {
  background-color: #1EAEDB;
}

text.labelRobin {
    font-family: "Droid Sans", sans-serif;
    fill: black;
    font-size: 8px;
    font-weight: bolder;
}

text.labelRobin {
    font-family: "Droid Sans", sans-serif;
    fill: black;
    font-size: 8px;
    font-weight: bolder;

}

<div class="container">
<svg viewBox="-60 -30 120 120" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink">
                    <mask id="myMask">
                        <!-- Everything under a white pixel will be visible -->
                        <rect id="rectMask" x="0" y="-7" width="22px" height="8px" fill="white"/>

                        <!-- Everything under a black pixel will be invisible -->
                        <text x="0" y="0" class="labelRobin">Robin</text>
                    </mask>

                    <defs>
                        <filter id="shadow">
                            <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.3"/>
                        </filter>
                    </defs>
                    <text style="filter: url(#shadow);" x="0" y="0" class="labelRobin" stroke="white" fill-opacity="0.0" stroke-width="0.1" >Robin</text>
                    <use xlink:href="#rectMask"  mask="url(#myMask)"/>
                </svg>
</div>

Hi, I have been playing around with SVG. AndI noticed a small bug. The problem occurs when using text as a mask. It seems the stroke on the text does not line up with the mask. If you turn on of bold the difference becomes more noticeable. I have attached a couple of screen shots to show the problem. The first is from Chrome which looks as expected. The second is in Firefox. The code is below which can be used with codepen. CSS: <pre><nowiki>.container { background-color: #1EAEDB; } text.labelRobin { font-family: "Droid Sans", sans-serif; fill: black; font-size: 8px; font-weight: bolder; } text.labelRobin { font-family: "Droid Sans", sans-serif; fill: black; font-size: 8px; font-weight: bolder; }</nowiki></pre> HTML: <pre><nowiki><div class="container"> <svg viewBox="-60 -30 120 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <mask id="myMask"> <!-- Everything under a white pixel will be visible --> <rect id="rectMask" x="0" y="-7" width="22px" height="8px" fill="white"/> <!-- Everything under a black pixel will be invisible --> <text x="0" y="0" class="labelRobin">Robin</text> </mask> <defs> <filter id="shadow"> <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.3"/> </filter> </defs> <text style="filter: url(#shadow);" x="0" y="0" class="labelRobin" stroke="white" fill-opacity="0.0" stroke-width="0.1" >Robin</text> <use xlink:href="#rectMask" mask="url(#myMask)"/> </svg> </div></nowiki></pre>