更新

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>

谢谢，埃雷兹（Erez）

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”库的本地响应。该代码在这种情况下似乎不起作用。缺乏“ 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>

通过clipPath反应本地图像阴影

1 个答案:

更新