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的参数。

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

小提琴：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>

SVG过滤器：将混合图像居中

1 个答案: