Avatar for Username

Rechercher dans l’assistance

Évitez les escroqueries à l’assistance. Nous ne vous demanderons jamais d’appeler ou d’envoyer un SMS à un numéro de téléphone ou de partager des informations personnelles. Veuillez signaler toute activité suspecte en utilisant l’option « Signaler un abus ».

Learn More

Ce sujet de discussion a été archivé. Veuillez poser une nouvelle question si vous avez besoin d’aide.

font rendering with SVG Mask

  • Aucune réponse
  • 1 a ce problème
  • 7 vues
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>
Captures d’écran jointes

Modifié le par cor-el