CODEWITHSUNDEEP
react-nativesvgshadowclip-path
erez victor
erez victor

Reputation: 31

React native image shadow over clipPath

I'm trying to add a shadow to an image clipped by a clippath over SVG, how can it be done in React native? if my original SVG is shadowed then the image covers it. My current code:

 <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>

Thanks, Erez

Upvotes: 0

Views: 1868

Answers (1)

enxaneta
enxaneta

Reputation: 33044

If you apply a shadow to the image and then you clip the image, you also clip the shadow off. In the next example I'm using the path and applying the shadow to the path. Next I'm drawing the image and clip the image.

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>

UPDATE

The OP is commenting:

I'm using react native with 'react-native-svg' library. this code doesn't seem to work in these circumstances. lacking support of 'feGaussianBlur' and other components

In this case if you have only this shape you can use a css filter to apply a shadow to the svg element:

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>

Upvotes: 1

Related Questions