将 SVG 不透明度设置为 x 和 y 的函数

Question

是否可以使用连续数学函数根据 x 和 y 坐标设置 SVG 元素的不透明度？ Here, I have a 20% opacity blue rectangle，但不是让它 20% 不透明，我想使用函数 sin(x)/2+sin(y)/2 定义矩形在每个点的不透明度，其中 x 和 y 是矩形内每个点的坐标。

<svg>
  <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" fill-opacity="0.2" />
</svg>

我尝试将不透明度设置为"Math.sin(x)/2+Math.sin(y)/2"，但这不会产生预期的效果。如何将 SVG 多边形的不透明度设置为 x 和 y 坐标的函数？

Answer 1

不，您不能在 SVG 中以声明方式设置它。即使是同时支持 SVG 和 CSS3 的 calc() 函数的用户代理也无法做到这一点，因为唯一有效的操作数是 CSS 长度单位，而不是任意属性。

为此，您需要：

1. 根据正在构建的对象的知识动态生成不透明度的 SVG，或者

2. 生成没有此信息的文档，然后对其进行处理以添加它们。

#2 的实现可以通过 XSLT（或任何其他创建新文档的“一次性”转换技术）或通过 UA 脚本（例如 JavaScript）在内存中实现。

JavaScript 解决方案可能如下所示：

var rects = document.querySelectorAll('rect');
for (var i=rects.length;i--;){
  // Assumes that all rects are neither transformed, nor are they
  // inside any transformation hierarchy
  var rect = rects[i];
  var x = (rect.getAttribute('x')||0)*1;
  var y = (rect.getAttribute('y')||0)*1;
  var opacity = Math.sin(x)/2+Math.sin(y)/2;
  rect.setAttribute('opacity',opacity);
}

编辑：请注意，这会单独影响形状的不透明度。相反，如果您要求控制每个像素形状的不透明度，作为填充效果，我的回答是：不，我很确定（但不是肯定的）SVG Filter Effects 没有办法做到这一点。

最接近的方法是使用两个 <feComponentTransfer> 和 <feFuncA type="table"> 将 X 和 Y 线性渐变映射到您选择的函数，然后再组合这些值。