Question

我正在尝试制作一种材质设计，其中有两层，其间有阴影。我认为最简单的方法是直接绘制底层（只是背景的覆盖矩形），然后使用蒙版绘制另一个矩形来绘制图像的内容。这个矩形应该投射阴影，但我相信由于阴影位于遮罩之外，它不会被渲染。我怎样才能渲染？

Codepen演示：https://codepen.io/Krakob/pen/OjqNKP（网站代码段似乎没有正确加载快照）

使用过的代码：

function logo(conf) {
  if (typeof conf === 'undefined') {
    var ch = 0.5; // Hue
    var cs = 0.4; // Saturation
    var cl = 0.5; // Luminosity

    conf = {
      text: ':^(',
      c_fg: Snap.hsl(ch, cs, cl),
      c_bg: Snap.hsl(ch, cs * 0.9, cl * 0.4),
      border: 10,
      tri_height: 20
    }
  };

  var canvas = Snap(100, 100);
  var foregr = Snap(100, 100);

  // Cover up the back of the canvas
  canvas.rect(0, 0, 100, 100).attr('fill', conf.c_bg);

  // Fill up the foreground with white
  foregr.rect(0, 0, 100, 100).attr('fill', 'white');

  // Subtract a circle
  foregr.circle(50, 50, 50 - conf.border).attr('fill', 'black');

  // Left triangle
  foregr.polygon([
    0, 50 - conf.tri_height / 2,
    0, 50 + conf.tri_height / 2,
    conf.tri_height, 50
  ]).attr({
    fill: 'white',
  });

  // Top triangle
  foregr.polygon([
    50 - conf.tri_height / 2, 0,
    50 + conf.tri_height / 2, 0,
    50, conf.tri_height
  ]).attr({
    fill: 'white',
  })

  foregr.text(50, 50, conf.text).attr({
    fill: 'white',
    'text-anchor': 'middle',
    'alignment-baseline': 'middle',
    'font-size': '2em',
    'font-family': 'Quicksand',
  });

  var shadow = canvas.filter(Snap.filter.shadow(2.5, 2.5, 0, 'red', 1));

  canvas.rect(0, 0, 100, 100).attr({
    fill: conf.c_fg,
    mask: foregr,
    filter: shadow
  })

  return canvas;
}

logo();

<html>
<head>
  <title>:^(</title>
</head>
<body>
  <script src="https://raw.githubusercontent.com/adobe-webplatform/Snap.svg/master/dist/snap.svg.js"></script>
  <script src="my.js"></script>
</body>
</html>

Snap.svg：从蒙版形状中投射阴影

0 个答案: