Avatar for Username

Zoeken in Support

Vermijd ondersteuningsscams. We zullen u nooit vragen een telefoonnummer te bellen, er een sms naar te sturen of persoonlijke gegevens te delen. Meld verdachte activiteit met de optie ‘Misbruik melden’.

Learn More

Deze conversatie is gearchiveerd. Stel een nieuwe vraag als u hulp nodig hebt.

font rendering with SVG Mask

  • Geen antwoorden
  • 1 heeft dit probleem
  • 7 weergaven
Robin
Robin
more options

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: 

.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;

}


HTML: 

<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>
Gekoppelde schermafbeeldingen

Bewerkt door cor-el op