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

Question

我試圖在SVG中使用蒙版創建文本效果。其他瀏覽器一切正常，但Opera和Safari根本不顯示效果（請參閱下圖）。效果是字符內部的白色區域。

我認爲Opera 12.02和Safari 5.1.7支持掩碼，因爲this W3 SVG mask test page通常在其中顯示。

我jsfiddled我有問題的網頁： 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中運行時，文本變爲黑色。其他瀏覽器接受良好的運行。

Answer 1

提起，作爲歌劇漏洞CORE-48922。對於生成的「附加變換」的影響，該規範有點不清楚，即x，y屬性對使用>元素的x，y屬性影響邊界框。

無論如何，您可以通過在< use>元素上不使用x，y屬性來解決此問題，而是將該翻譯上移到父元素< g>元素（自己不要重複立場）。

所以，你最終應該得到的東西就像this fiddle。