Question

这里的错误简单演示：https://codepen.io/mknepprath/pen/mKeObo

在Chrome中打开以查看其外观。

的问题：

在Safari中，过滤器似乎不适用或仅部分应用... 这不一样。
在Firefox中，根本没有任何显示 - 似乎隐藏过滤器和应用过滤器的div。

如何让它在浏览器中保持一致？

HTML：

<svg class='a'>
  <defs>
    <filter id='hey'>
      <feColorMatrix
        type='matrix'
        result='darken'
        x='0'
        y='0'
        width='200px'
        height='100px'
        values='.2 .05  .05 0 .35
                .05 .2  .05 0 .35
                .05 .05 .2  0 .35
                0   0    0  1 0'
      />
      <feColorMatrix
        type='matrix'
        result='node'
        x='0'
        y='0'
        width='200px'
        height='100px'
        values='1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 1 0'
      />
      <feMerge>
        <feMergeNode in='darken' />
        <feMergeNode in='node' />
      </feMerge>
    </filter>
  </defs>
</svg>
<div class='b' style='filter: url(#hey)'></div>

的CSS：

.a {
  display: none;
}

.b {
  width: 200px;
  height: 100px;
  background: peachpuff;
}

Answer 1

Chrome接受错误的语法并尝试充分利用它，Firefox通常不会。

使用display：none将SVG从DOM中取出，因此CSS无法再找到样式。使SVG为零，将其置于内容之下或使用可见性：隐藏
至少在SVG 1.1中，你不应该＆＃39;能够使用＆＃34; px＆＃34;，＆＃34; em＆＃34;等来确定您的滤镜元素的尺寸。（并且不需要调整feColorMatrix的大小 - 默认情况下会自动调整大小。）

＆＃13;

.a {
  width: 0;
  height: 0;
}

.b {
  width: 200px;
  height: 100px;
  background: peachpuff;
}

＆＃13;

<svg class="a">
  <defs>
    <filter id="hey">
      <feColorMatrix
        type="matrix"
        result="darken"
        values=".2 .05  .05 0 .35
                .05 .2  .05 0 .35
                .05 .05 .2  0 .35
                0   0    0  1 0"
      />
      <feColorMatrix
        type="matrix"
        result="node"
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 1 0"
      />
      <feMerge>
        <feMergeNode in="darken" />
        <feMergeNode in="node" />
      </feMerge>
    </filter>
  </defs>
</svg>
<div class="b" style="filter: url(#hey)"></div>

＆＃13;

SVG过滤器：仅适用于Chrome，而非其他浏览器

1 个答案: