Opera和Safari不会在SVG中显示蒙版文本

Question

我试图在SVG中使用蒙版进行文本效果。一切都适用于其他浏览器，但Opera和Safari根本没有显示效果（请参见下图）。效果是字符内的白色区域。

我认为Opera 12.02和Safari 5.1.7支持蒙版，因为this W3 SVG mask test page正常显示在其中。

我讨论了有问题的页面： http://jsfiddle.net/pQ5Yj/

使用以下代码创建遮罩：

<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"/>

知道我的代码有什么问题，或者这是Opera和Safari中的某种错误？

出于某种原因，当我使用Opera在Jsfiddle中按Run时，文本会变为黑色。其他浏览器接受了很好的按压。

Answer 1

归档为Opera bug CORE-48922。规范有点不清楚生成的＆＃34;额外转换的影响＆＃34; ＆lt; use＆gt;上的x，y属性元素有助于边界框。

无论如何，你可以通过不在＆lt; use＆gt;上使用x，y属性来解决这个问题。元素，而是将翻译移动到父级＆lt; g＆gt;元素（从不要重复自己的观点来看也很好。）

所以，你应该最终得到的是this fiddle。