剪辑路径上的本机图像阴影

Question

我正在尝试向通过SVG的剪切路径剪切的图像添加阴影，如何在React native中完成呢？如果我的原始SVG被阴影覆盖，则图像会覆盖它。我当前的代码：

<svg>
        <Defs>
          <ClipPath id='clip'>
            <Path
              d='M113.093,63.183c9.5-23.17,42.313-23.17,51.814,0l97.257,237.195A28,28,0,0,1,236.257,339H41.743a28,28,0,0,1-25.907-38.622Z'
              transform='translate(340.5 -12.21) rotate(90)'
              scale={scale}
            />
          </ClipPath>
        </Defs>
        <Image
          href={{
            uri: uri,
          }}
          clipPath='url(#clip)'
          width='100%'
          height='100%'
          preserveAspectRatio='xMidYMax slice'
        />
</Svg>

谢谢，埃雷兹

Answer 1

如果将阴影应用于图像，然后裁剪图像，则也将阴影裁剪掉。在下一个示例中，我将使用路径并将阴影应用于路径。接下来，我要绘制图像并裁剪图像。

svg{width:300px;}

<svg viewBox="0 0 300 390">
  <defs>
    <filter id="f">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="desenfoque"></feGaussianBlur>
      <feOffset in="desenfoque" dx="3" dy="3" result="sombra"></feOffset>
      <feMerge>
        <feMergeNode in="sombra"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
    <clipPath id='clip'>
      <path id="thePath" d='M113.093,63.183c9.5-23.17,42.313-23.17,51.814,0l97.257,237.195A28,28,0,0,1,236.257,339H41.743a28,28,0,0,1-25.907-38.622Z' />
    </clipPath>
  </defs>
  <use xlink:href="#thePath" filter="url(#f)" />
  <image xlink:href="https://assets.codepen.io/222579/castell.jpg" clip-path='url(#clip)' width='100%' height='100%' preserveAspectRatio='xMidYMax slice' />
</svg>