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过滤器输入。

几天前，Firefox nightlies 中添加了对 FillPaint 和 StrokePaint 的支持，因此 Firefox 中的过滤器工作仍在继续，除了 BackgroundImage/Alpha 之外，这些天已经完成了。

于 2012-08-07T09:40:40.933 回答