这里有一个演示 feComposite 的代码示例:
http://www.w3.org/TR/SVG/filters.html#feCompositeElement
但是这个示例至少在 FF 和 Chrome 上运行时只打印背景三角形,而没有混合前景三角形。我只是在学习 SVG,所以不知所措,尽管它可能与 XML namespace 有关,并且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>
它应该生成 但它只是输出 (即只有背景三角形,没有通过过滤器混合的前景三角形。)任何帮助表示赞赏。已经看了一段时间了。
最佳答案
该示例使用 BackgroundImage过滤 Firefox doesn't yet support 的输入.
对 FillPaint 和 StrokePaint 的支持是在几天前添加到 Firefox nightlies 中的,因此在 Firefox 中过滤器的工作仍在继续,除了 BackgroundImage/Alpha 之外,这些天已经相当完整了。
关于svg - 来自官方网站的 feComposite 代码示例无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11839070/