3

ここにあるfeCompositeを示すコード例があります:

http://www.w3.org/TR/SVG/filters.html#feCompositeElement

しかし、少なくともFFで実行し、Chromeが前景の三角形をブレンドせずに、背景の三角形を出力する場合の例。私はSVGを学習しているだけなので、途方に暮れていますが、XML名前空間とfilter=と関係があるかもしれません。 「url(...」コマンドは実際にはフィルターにアクセスしていません(推測ですが)。

問題を示すコードの一部を抽出しました。

    <?xml version="1.0"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
              "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="330" height="195" viewBox="0 0 1100 650" version="1.1"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
        <filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
          <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
        </filter>
        <path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" />
        <path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" />
      </defs>

      <g  enable-background="new">
        <use xlink:href="#Blue100"/>
        <use xlink:href="#Red100" filter="url(#atopNoFlood)" />
      </g>
    </svg>

生成されているはずですここに画像の説明を入力してくださいが、代わりに出力されますここに画像の説明を入力してください(つまり、前景の三角形がフィルターを介してブレンドされていない背景の三角形だけです)。しばらくこれを見てきました。

4

1 に答える 1

2

この例では、FirefoxがまだサポートしていないBackgroundImageフィルター入力を使用しています。

FillPaint と StrokePaint のサポートが数日前に Firefox nightlies に追加されたので、Firefox でのフィルターの作業は継続されており、BackgroundImage/Alpha を除いて、最近はかなり完成しています。

于 2012-08-07T09:40:40.933 に答える