0

SVG でマスクを使用してテキスト効果を作成しようとしました。他のブラウザでは問題ありませんが、Opera と Safari ではまったく効果がありません (下の画像を参照してください)。効果は、文字内の白い領域です。

Opera 12.02 と Safari 5.1.7 ではマスクがサポートされていると思います。この W3 SVG マスク テスト ページは正常に表示されるからです。

問題のあるページを jsfiddle しました: 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>要素に移動することで問題を回避できます（繰り返し禁止の観点からも適切です）。

だから、あなたが最終的にすべきものは、このフィドルのようなものです。

于 2012-10-05T12:04:16.857 に答える