SVG过滤器:使混合图像居中

Question

我有一个SVG过滤器，它用微调器覆盖图像。这很好，只是我不知道如何在图像上居中微调器。合乎逻辑的答案似乎是：

<filter id="loading" primitiveUnits="objectBoundingBox">
  <feImage xlink:href="filters.svg#loading-overlay" x="50%" y="50%" result="spinner" />
  <feOffset in="spinner" result="offsetSpinner" dx="-25px" dy="-25px" />
  <feBlend in2="SourceGraphic" in="offsetSpinner" />
</filter>

当然，您不能使用"-25px"作为feOffset的参数。

有人有聪明的解决方案吗？

Fiddle：https://jsfiddle.net/pytmd8tr/

（就我的观点而言，我认为primitiveUnits的工作方式真的很愚蠢。特别是，将模糊的stdev指定为原始图像的%是没有意义的。也许我错过了一些明显的东西？）

Answer 1

您可以使用JavaScript计算正确的%并插入它们，但如果失败，应该可以这样做。（尽管feImage的大小和定位在IE10中可能存在错误）。

 <filter id="loading" primitiveUnits="objectBoundingBox">
      <feImage xlink:href="#loading-overlay" x="25%" y="25%" width="50%" height="50%" result="spinner" />
      <feBlend in2="SourceGraphic" in="spinner" result="foo" />
    </filter>