使 SVG 中的混合模式真正起作用? [英] Make Blend Modes in SVG actually work?

问题描述

我已经做过很多次了:

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

但是当我在一个形状里面写filter="url(#screen)"时，我的形状消失了.我在所有浏览器(Safari、Chrome、Firefox、FfxNightly)中都试过了.我做错了什么?

But when I, inside a shape, write "filter="url(#screen)", my shape disappears. I've tried it in every browser (Safari, Chrome, Firefox, FfxNightly). What am I doing wrong?

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

谢谢

推荐答案

你应该试试 Opera 看看有什么不同.看来，Opera 是目前唯一或多或少正确实现这一点的浏览器. 的规范举个例子:

You should try Opera and see the difference. It seems, Opera is the only browser that currently implements this more or less correctly. The specs for <feBlend> give an example:

<?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>

如果渲染正确，此示例应如下所示:

This example should look like this if rendered correctly:

它实际上在您的浏览器中是这样的:

It actually looks like this in your browser:

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

In my Opera it looks like this:

即，并不完全完美，mode="lighten" 存在问题.

I.e., not entirely perfect, there are problems with mode="lighten".

这篇关于使 SVG 中的混合模式真正起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！