1

是否可以使用连续数学函数根据 x 和 y 坐标设置 SVG 元素的不透明度？在这里，我有一个 20% 不透明度的蓝色矩形，但不是让它 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 坐标的函数？

4

1 回答 1

1

不，您不能在 SVG 中以声明方式设置它。即使是同时支持 SVG 和 CSS3calc()功能的用户代理也无法做到这一点，因为唯一有效的操作数是 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 线性渐变映射到您选择的函数，然后再组合这些值。

于 2013-05-06T04:59:23.460 回答