Opera 和 Safari 不显示 SVG 中的蒙版文本答案

【问题标题】：Opera and Safari doesn't show masked text in SVGOpera 和 Safari 不显示 SVG 中的蒙版文本
【发布时间】：2012-10-05 09:46:13
【问题描述】：

我尝试在 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 中按 Run 时，文本变为黑色。其他浏览器接受良好的运行。

【问题讨论】：

标签： safari svg opera mask jsfiddle

【解决方案1】：

将其归档为 Opera 错误 CORE-48922。对于生成的“附加变换”的影响，规范有点不清楚元素上的 x,y 属性对边界框的贡献。

无论如何，您可以通过不在元素上使用 x,y 属性来解决此问题，而是将翻译移动到父元素（从不要重复自己的角度来看也很好） )。

所以，你最终应该得到像this fiddle 这样的东西。

【讨论】：

谢谢。它很好地解决了 Opera 和 Safari 中的问题，但现在在 Firefox (15.0.1?) 中失败了。