4

これが私の単純なsvgです：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
    <filter id="f1" x="0" y="0">
      <feBlend mode="multiply" in="SourceGraphic" in2="SourceGraphic" />
    </filter>
    </defs>
    <path d='M100 100 L200 100 L200 200 L100 200 Z' fill='#00FFFF'/>
    <path d='M150 150 L250 150 L250 250 L150 250 Z' fill='#CC3300'/>
    <path d='M175 175 L275 175 L275 275 L175 275 Z' fill='#FFFF00'/>
</svg>

</body>
</html>

シンプルな 3 つの長方形の形状です。3 つの長方形すべてにブレンド モード MULTIPLY を適用することは可能ですか?

4

1 に答える 1

7

はい、可能ですが、本来あるべきほど素晴らしいものではありません。1 つ目は feImage を使用し、2 つ目は BackgroundImage フィルター入力を使用します。ご覧のとおり、どちらにも欠点があります。svg コンテンツや BackgroundImage フィルター入力を参照する feImage のサポートは普遍的ではありませんが、Opera や Chrome などで試して結果を確認できます。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <filter id="f1" x="0" y="0" width="1" height="1">
          <feImage xlink:href="#p1" result="p1"/>
          <feImage xlink:href="#p2" result="p2"/>
          <feImage xlink:href="#p3" result="p3"/>
          <feBlend mode="multiply" in="p1" in2="p2" />
          <feBlend mode="multiply" in2="p3" />
        </filter>

        <filter id="f2" x="0" y="0" width="1" height="1">
          <feBlend mode="multiply" in="BackgroundImage" in2="SourceGraphic" />
        </filter>

        <path id="p1" d='M100 100 L200 100 L200 200 L100 200 Z' fill='#00FFFF'/>
        <path id="p2" d='M150 150 L250 150 L250 250 L150 250 Z' fill='#CC3300'/>
        <path id="p3" d='M175 175 L275 175 L275 275 L175 275 Z' fill='#FFFF00'/>
    </defs>
    <rect width="100%" height="100%" filter="url(#f1)"/>

    <g transform="translate(300 0)">
        <g enable-background="new">
            <g enable-background="new">
                <path d='M100 100 L200 100 L200 200 L100 200 Z' fill='#00FFFF'/>
                <path d='M150 150 L250 150 L250 250 L150 250 Z' fill='#CC3300' filter="url(#f2)"/>
            </g>
            <path d='M175 175 L275 175 L275 275 L175 275 Z' fill='#FFFF00' filter="url(#f2)"/>
        </g>
    </g>
</svg>

すべてのブラウザーでCSS の合成とブレンドがすぐにサポートされることを願っています。それがサポートされている場合は、代わりに次のように書くことができます。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <style>
       path { mix-blend-mode: multiply; }
    </style>
    <path d='M100 100 L200 100 L200 200 L100 200 Z' fill='#00FFFF'/>
    <path d='M150 150 L250 150 L250 250 L150 250 Z' fill='#CC3300'/>
    <path d='M175 175 L275 175 L275 275 L175 275 Z' fill='#FFFF00'/>
</svg>

これが実際の例です。

于 2012-07-20T14:23:26.083 に答える