时间戳

首页 > 解决方案 > SVG 过滤器：仅适用于 Chrome，不适用于其他浏览器

javascript - SVG 过滤器：仅适用于 Chrome，不适用于其他浏览器

问题描述

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

在 Chrome 中打开以查看它的外观。

问题：

我如何让它在浏览器中始终如一地工作？

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;
}

标签： javascriptsvgfiltercross-browsersvg-filters

解决方案

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

  • 使用 display:none 将 SVG 从 DOM 中取出，因此 CSS 无法再找到样式。使 SVG 大小为零，将其放在您的内容下方或使用可见性：隐藏
  • 至少在 SVG 1.1 中，您不应该使用“px”、“em”等来确定过滤器元素的尺寸。（并且不需要调整 feColorMatrixes 的大小 - 默认情况下会自动计算大小。）

.a {
  width: 0;
  height: 0;
}

.b {
  width: 200px;
  height: 100px;
  background: peachpuff;
}
<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>

推荐阅读