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长度单位，而不是任意属性。

要做到这一点，你需要：

动态生成SVG，不透明度基于正在构建的对象的知识，或
生成没有此信息的文档，然后对其进行处理以添加它们。

＃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线性渐变映射到您选择的函数，然后再合并这些值。

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

1 个答案: