在 clipPath 上反应原生图像阴影

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="150 -20 180 160" width="200">
  <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' transform='translate(340.5 -12.21) rotate(90) scale(.5)'/>
    </clipPath>
  </defs>
  <use xlink:href="#thePath" filter="url(#f)" id="use" />
  <image x="150" y="-20" xlink:href="https://assets.codepen.io/222579/castell.jpg" clip-path='url(#clip)' width='100%' height='100%' preserveAspectRatio='xMidYMax slice' />
</svg>

更新

OP 正在评论：

我正在使用带有“react-native-svg”库的 react native。这段代码在这些情况下似乎不起作用。缺乏对“feGaussianBlur”和其他组件的支持

在这种情况下，如果您只有这个形状，您可以使用 css 过滤器将阴影应用到 svg 元素：

svg{filter:drop-shadow(2px 2px 5px #000);}

<svg viewBox="150 -20 180 160" width="200">
  <defs>
    <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' transform='translate(340.5 -12.21) rotate(90) scale(.5)'/>
    </clipPath>
  </defs>
  <image x="150" y="-20" xlink:href="https://assets.codepen.io/222579/castell.jpg" clip-path='url(#clip)' width='100%' height='100%' preserveAspectRatio='xMidYMax slice' />
</svg>