Avatar for Username

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊，或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

Learn More

此討論串已被封存。 如果您有需要幫助，請新增一個新問題

font rendering with SVG Mask

  • 無回覆
  • 1 有這個問題
  • 5 次檢視
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>
附加的畫面擷圖

由 cor-el 於 修改