0

我试图在 SVG 中使用蒙版制作文本效果。在其他浏览器上一切都很好，但 Opera 和 Safari 根本不显示效果（请参见下图）。效果是字符内部的白色区域。

我假设 Opera 12.02 和 Safari 5.1.7 支持遮罩，因为这个 W3 SVG 遮罩测试页面在它们中正常显示。

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

蒙面文本

4

1 回答 1

0

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

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

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

于 2012-10-05T12:04:16.857 回答