gpt4 book ai didi

svg - 让 SVG 中的混合模式真正起作用?

转载 作者:行者123 更新时间:2023-12-04 20:13:50 26 4
gpt4 key购买 nike

我做过很多次:

<defs>
<filter id="screen">
<feBlend mode="screen" in2="BackgroundImage"/>
</filter>
</defs>

但是当我在一个形状中写下“filter=”url(#screen)”时,我的形状消失了。我在每个浏览器(Safari、Chrome、Firefox、FfxNightly)中都试过了。我做错了什么?

如果有人能给我一个他们知道有效的例子,这会有所帮助

谢谢

最佳答案

您应该试试 Opera 看看有什么不同。看来,Opera 是目前唯一或多或少正确实现此功能的浏览器。 specs for <feBlend> 举个例子:

<?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="5cm" height="5cm" viewBox="0 0 500 500"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example feBlend - Examples of feBlend modes</title>
<desc>Five text strings blended into a gradient,
with one text string for each of the five feBlend modes.</desc>
<defs>
<linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
x1="100" y1="0" x2="300" y2="0">
<stop offset="0" stop-color="#000000" />
<stop offset=".33" stop-color="#ffffff" />
<stop offset=".67" stop-color="#ff0000" />
<stop offset="1" stop-color="#808080" />
</linearGradient>
<filter id="Normal">
<feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
<filter id="Multiply">
<feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
<filter id="Screen">
<feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
<filter id="Darken">
<feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
<filter id="Lighten">
<feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
</filter>
</defs>
<rect fill="none" stroke="blue"
x="1" y="1" width="498" height="498"/>
<g enable-background="new" >
<rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)" />
<g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" >
<text x="50" y="90" filter="url(#Normal)" >Normal</text>
<text x="50" y="180" filter="url(#Multiply)" >Multiply</text>
<text x="50" y="270" filter="url(#Screen)" >Screen</text>
<text x="50" y="360" filter="url(#Darken)" >Darken</text>
<text x="50" y="450" filter="url(#Lighten)" >Lighten</text>
</g>
</g>
</svg>

如果正确呈现,此示例应如下所示:

在您的浏览器中它实际上看起来像这样:

在我的 Opera 中它看起来像这样:

也就是说,不完全完美,mode="lighten" 有问题.

关于svg - 让 SVG 中的混合模式真正起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14307079/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com