为什么这个 SVG 过滤器不能在使用 Chrome 的画布上下文中工作？

Question

我有一个 SVG 过滤器保存在与画布位于同一网站上的文件中。画布尝试使用该过滤器来绘制过滤后的图像，但会渲染原始图像，忽略过滤器。

SVG文件的路径正确，滤镜的ID正确。我做错了什么？

这是“spherize.svg”文件的内容...

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="sphereFilter">
            <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
            <feOffset in="blur" dx="2" dy="2" result="offset"/>
            <feComposite in="SourceGraphic" operator="normal" in2="offset" result="final"/>
        </filter>
    </defs>
</svg>

这是在画布渲染函数中进行的调用...

context.filter = "url(/resources/filters/spherize.svg#sphereFilter)";
context.drawImage(image, 0, 0, width, height);

我在最新公开版本的 macOS (15.1.1) 上使用最新公开版本的 Chrome (131.0.6778.205)。此外，使用简单的单行过滤器（例如

feFlood

）实际上是可行的，因此要么是过滤器的定义存在问题，要么是 Chrome 的处理能力存在问题。

感谢您的任何见解。

Answer 1

您只显示您的 SVG 过滤器，而不显示您的画布代码...

<canvas id="myCanvas" width="200" height="200" style="background:pink"></canvas>
<script>
  const svg = 
      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
          <defs>
              <filter id="sphereFilter">
                  <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
                  <feOffset in="blur" dx="2" dy="2" result="offset"/>
                  <feComposite in="SourceGraphic" operator="normal" in2="offset" result="final"/>
              </filter>
          </defs>
          <circle cx="50%" cy="50%" r="40%" fill="green" filter="url(#sphereFilter)" />
      </svg>`

  const img = new Image()
  img.onload = () => {
    document.getElementById("myCanvas").getContext("2d").drawImage(img, 0, 0, 180, 180)
  }
  img.src = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml" }))
</script>