0

私はJavascriptで構築しているSVGを持っています。大きな SVG ファイルを読み込み、パスで描画された断片に分割し、各要素をページに配置します。これらの SVG は、読み込んでいる他の画像のマスクとしてのみ使用しています。基本的に私の構造は次のようなものです。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="26.750152587890625 10.117172241210938 197.24969482421875 348.1596221923828" width="197.25" height="348.16015625">
    <mask id="designMask" maskContentUnits="objectBoundingBox">
        <g id="CutContour1bg">
            <path d="[my path coords]" style="fill:#FFFFFF;">
        </g>
    </mask>
    <image href="http://myImage.jpg" style="mask: url(#designMask);" width="800px" height="800px" x="26.75" y="10.1171875">
</svg>

これにより、FF、IE9、Chrome、Safari 5.1（デスクトップ）で、SVG パーフェクトでマスクされている画像がレンダリングされます。ただし、モバイル サファリでは、画像が正しくレンダリングされません。仮面の座標をたどると、すべて正しい。FF では、SVG ロード (すべて黒) がマスクになると消えます。(デザインが読み込まれるまで待ってから、コンテンツが読み込まれる前に FF でマスクを探すのに問題があるため、ラップ<g>します。<mask>

これは、マスクの位置が必要な場所に正確にあることを示していますが、そうでmaskContentUnitsはありません. 私が言っているように、それらはオブジェクトの境界ボックスではなく左上隅に残ります。マスク内の画像の一部がほとんど見えないため、マスクの単位は正しいのですがmaskContentUnits、モバイル サファリで動作したり読み取ったりすることができません。

誰かがこの問題を見たことがありますか、またはそれを修正する方法はありますか? モバイル サファリを除いてどこでも動作するのは嫌いです。これは主にモバイルで動作することを意図しているためです。

ありがとう！

4

1 に答える 1

1

モバイルサファリで適切に動作させる方法をまだ見つけていmaskContentUnitsません.他のブラウザのようにまだ認識されていないだけだと確信しています. しかし、この例を機能させるための「ハック」を見つけました。

問題は、マスクとして使用されている svg オブジェクトではなく、マスク領域がブラウザーの左上隅にあることです。そのため、ページの中央に svg がある場合、マスクされる画像は同じ位置には従いません。

それが機能するために私が見つけた方法は、svgdivと同じ幅でsvgを内側にラップし、svgの代わりにdivの位置を変更することです。このように、マスクは技術的には「左上」隅にありますが、svg のオフセット位置ではなく div です。

モバイルサファリでレンダリングを適切にするためのより良い方法を誰かが見つけたらmaskContentUnits、私はそれを聞きたいです!

于 2012-06-15T16:39:30.990 に答える