3

最近、私は SVG を使用する必要があるプロジェクトに取り組んでおり、それはブレンディング モード フィルターです。基本要素は背景画像で、いくつかの形状があります (ほとんどの場合、ベタ塗りのパス)。問題は、Chrome のレンダリングに問題があるように見えることです。背景画像が明るすぎたり、ブレンドされたパスの周りに奇妙で過度に明るくなった長方形が表示されたりします。Firefox と Opera は同時に正常に動作します。

バグを表示するための追加設定の例があります: Live example

コードの最も重要な部分:

<svg version="1.1" id="layer-0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="1097" height="835" viewBox="0 0 1097 835">
<defs>
    <filter id="img">
        <feImage xlink:href="static/img/bg.jpg" x="0" y="0" width="100%" height="100%" />
    </filter>

    <filter id="filter">
        <feImage result="img1" xlink:href="static/img/bg.jpg" x="0" y="0" width="100%" height="100%" />
        <feBlend mode="multiply" in="SourceGraphic" in2="img1" result="multi" />
    </filter>
</defs>

<image xlink:href="static/img/bg.jpg" width="100%" height="100%" />

<g style="filter:url(#img)" height="100%" width="100%" id="fix"></g>

<circle filter="url(#filter)" class="shape" cx="560" cy="380" r="120" />

#filter で使用されている背景が切り取られているため、余分なイメージ タグを追加する必要がありました (しかし、なぜでしょうか?)。は Chrome の修正ですが、満足のいく解決策ではありません。

バグの原因を知っている人はいますか？多分私はそれを間違っていますか？これを解決するために何十時間も費やしましたが、まだ効果がありません。

4

1 に答える 1

0

同様の問題があり、htmlヘッダーから基本要素を削除して修正しました。クロムのバグだと思います。

于 2013-12-03T13:06:34.573 に答える