0

I have tried to make text effect with mask in SVG. All is fine with other browsers, but Opera and Safari doesn't show the effect at all (please see the image below). The effect is the white area inside characters.

I assume that Opera 12.02 and Safari 5.1.7 has support for masks, because this W3 SVG mask test page is shown normally in them.

I jsfiddled my problematic page: http://jsfiddle.net/pQ5Yj/

Mask is created using this code:

<defs>
  <text id="text" font-family="Times" font-size="480">Va</text>
  <mask id="myMask" maskUnits="objectBoundingBox">
    <use xlink:href="#text" fill="#FFFFFF" stroke="#000000" stroke-width="20" 
    stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="40"/>
  </mask>
</defs>
<use x="40" y="370" xlink:href="#text" fill="white" stroke="black"
stroke-width="24" mask="url(#myMask)" stroke-linecap="square"
stroke-linejoin="miter" stroke-miter-limit="1000"/>

Any idea what is wrong with my code or is this some sort of bug in Opera and Safari?

Also for some reason when I press Run in Jsfiddle using Opera, the texts changes to black. Other browsers accept well pressing Run.

Masked text

Timo Kähkönen
  • 11,962
  • 9
  • 71
  • 112

1 Answers1

0

Filed that as Opera bug CORE-48922. The spec is a little bit unclear on the effects of the generated "additional transform" that the x,y attributes on the <use> elements contribute to wrt the boundingbox.

Anyway, you can work around the issue by not using x,y attributes on the <use> elements, instead moving the translation up to the parent <g> element (also good from a don't-repeat-yourself standpoint).

So, what you should end up with is something like this fiddle.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139