2

SVGで2つの画像を使用して画像マスクを作成するときに、画像の不透明度を保持するにはどうすればよいですか？下の写真に見られるように、画像はほぼ透明です-完全に不透明である必要があります。なぜこれが発生するのですか？また、マスクされた製品に100％の不透明度を強制するにはどうすればよいですか？

これが私が得ている結果です：

ここに画像の説明を入力してください

これが私が使用しているマスク画像です： ここに画像の説明を入力してください

これが私のコードです（PHP変数については申し訳ありません）：

<svg width="'.$width.'" height="'.$height.'" version="1.1"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>                          
            <mask id="mask'.$id.'" maskUnits="userSpaceOnUse"
                x="0" y="0" width="'.$width.'" height="'.$height.'">

                <image id="maskImg'.$id.'" x="0" y="0" width="'.$width.'px" height="'.$height.'px"
                    xlink:href="images/'.$treatment_url.'" >
                </image>        
            </mask>

            <g id="imgGroup'.$id.'">
                <rect x="0" y="0" width="'.$width.'" height="'.$height.'" fill="rgba(30,30,30,0.2)"  />
                <image id="listingImg'.$id.'" 
                    x="0" y="0" width="'.$width.'px" height="'.$height.'px"
                    xlink:href="'. $img_url .'">
                </image>
            </g>                    
        </defs> 

    <use xlink:href="#imgGroup'.$id.'" mask="url(#mask'.$id.')" opacity="1" />';    
</svg>

参考：グループ<rect>内の<g>グループは、MASKED画像のxまたはy次元がMASKING画像よりも小さい場合に背景を提供するためのものです。両方の方法で試したので、私が抱えているマスキングの問題には影響しません。

私は困惑しています、そしてどんな助けにも感謝します！

4

1 に答える 1

4

SVG 1.1 は輝度マスクを使用します。簡単でやや不正確な説明は次のとおりです。マスク イメージの白は完全に不透明になり、黒は完全に透明になります。ここにいくつかの説明があります。画像付きマスクのより高度な例については、こちらを参照してください。

アルファ マスクが提案され、SVG2の要件として受け入れられました。

于 2012-06-13T21:47:49.503 に答える