Svg 来自官方网站的feComposite代码示例不起作用
这里有一个演示feComposite的代码示例: 但是,当至少在FF和Chrome上运行时,示例只打印背景三角形,而不混合前景三角形。我只是在学习SVG,所以我很茫然,尽管它可能与XML名称空间有关,filter=“url(…”命令实际上并没有访问过滤器(只是猜测) 我提炼出一部分代码来演示问题:Svg 来自官方网站的feComposite代码示例不起作用,svg,Svg,这里有一个演示feComposite的代码示例: 但是,当至少在FF和Chrome上运行时,示例只打印背景三角形,而不混合前景三角形。我只是在学习SVG,所以我很茫然,尽管它可能与XML名称空间有关,filter=“url(…”命令实际上并没有访问过滤器(只是猜测) 我提炼出一部分代码来演示问题: <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
<?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>
它应该是生成的,但它只是输出(即,只有背景三角形,没有通过过滤器混合的前景三角形)。任何帮助都值得赞赏。我们已经看了一会儿了。该示例使用Firefox提供的过滤器输入
Firefox nightlies几天前添加了对FillPaint和StrokePaint的支持,因此Firefox中的过滤器工作仍在继续,除了BackgroundImage/Alpha,这几天已经相当完整了。Chrome呢?我实际上是先在Chrome上试用过,但也不起作用。它在哪种浏览器上工作?显然Chrome可以esn既不是,也可能不是Safari:。如果您想在其中进行测试,Opera支持它。在web浏览器之外,Batik和Inkscape也可以正确渲染它。