I was trying to add gradient to the text in my react-native project using react-native-svg
<Svg height="50"
width="300" >
<LinearGradient id="Gradient" x1="0" x2="800" y1="0" y2="0">
<Stop offset="0" stopColor="#C2515D" stopOpacity="0" />
<Stop offset="1" stopColor="black" stopOpacity="1" />
</LinearGradient>
<Text fill="url(#Gradient)"
x="0"
y="30"
fontSize="30"
textAnchor="start">
Sign Up
</Text>
</Svg>
Here I was getting only (#C2515D) this color, I cant able to get black color, trying from 5 hours. Any suggestions?
It is all because of X2 position, I changed my x2 position to 100 and set the stop color as
`<Stop stopColor="#C2515D" offset="0%" />
<Stop stopColor="black" offset="70%" />
`
Hope this helps someone who got struck with this issue
Related
I am facing an annoying issue using react-native-svg to implement a radial gradient that from grey has a transparent color.
For some reason I can still see a grey-ish tint on the center of the gradient, that is supposed to be transparent, in order to see the image below without any color on top.
This is the code I am using:
<Svg
height="700"
width="1000"
style={{ position: "absolute", left: -400, top: -350 }}
>
<Defs>
<RadialGradient
id="cardCircleGradient"
cx="600"
cy="600"
rx="600"
ry="600"
fx="600"
fy="600"
gradientUnits="userSpaceOnUse"
>
<Stop offset="0" stopColor="#00000000" stopOpacity="0" /> <-HERE is where I cannot implement a transparent color
<Stop
offset="1"
stopColor="rgba(14, 14, 14, 0.45)"
stopOpacity="1"
/>
</RadialGradient>
</Defs>
<Circle cx="600" cy="600" r="600" fill="url(#cardCircleGradient)" />
</Svg>
Did someone experience a similar issue?
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
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>
I am trying to use SVG in my react native project. This is the code for my component:
<Svg xmlns="http://www.w3.org/2000/svg" width="100%" height="507" viewBox="0 0 375 507" style={{position:'absolute', bottom:0}}>
<Defs>
<ClipPath id="a">
<Rect class="a" fill='#fff' stroke='#707070' width="375" height="507" transform="translate(0 160)" d="M0 0h375v507H0z"/>
</ClipPath>
<LinearGradient id="b" clipPath='url(#a)' x1="0.5" x2="-0.031" y2="1.477" gradientUnits="objectBoundingBox">
<Stop offset="0" stopColor="rgb(76,209,149)" />
<Stop offset="1" stopColor="rgb(170,221,100)" />
</LinearGradient>
</Defs>
<G class="b" transform="translate(0 -160)">
<Circle class="c" cx="334.249" cy="334.249" r="334.249" transform="translate(-146.354 164.646)" fill='url(#b)' />
</G>
</Svg>
The Output I'm getting is:
https://i.stack.imgur.com/mGaBg.png
I think #enxaneta is right, clip-path seems to not exist on react-native-svg please refer to the documentation, you may find on the docs here react-native-svg #LinearGradient
I think you should have to reference it like this:
<Rect class="a" fill="url(#yourGradientId)" stroke='#707070' width="375" height="507" transform="translate(0 160)" d="M0 0h375v507H0z"/>
where fill should be reference to your gradient id i.e. fill=url(#b)
I've used <Path> to achieve the results below
Note: I have achieve this by using two shapes on top of each other:
A component with background gradient using react-native-linear-gradient
And the LinearGradient from react-native-linear-gradient
Please refer to the codes below.
Code of example above
import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg';
import Gradient from 'react-native-linear-gradient'
const { width, height } = Dimensions.get('window')
<Gradient style={{height: height * .25,}}
colors={ ['#FFD080', 'red'] }
start={{ x: 0, y: 0}}
end={{ x:1, y: 1}}
locations={[0.18, 1, 1]}>
<Svg
height={height * .44}
width={width}
viewBox="0 0 1440 320"
style={{ position: 'relative', top: height * .069 }}
>
<Defs>
<LinearGradient id="path" x1="0" y1="0" x2="1" y2="1">
<Stop offset="0" stopColor="#FFD080" stopOpacity="1" />
<Stop offset="1" stopColor="red" stopOpacity="1" />
</LinearGradient>
</Defs>
<Path fill="url(#path)"
d="M0,96L48,133.3C96,171,192,245,288,229.3C384,213,480,107,576,74.7C672,43,768,85,864,133.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"/>
</Svg>
</Gradient>
I found a solution that instead of using the svgs having gradient,I converted the SVG into a Lottie file. that works great and as an extra advantage, we can transform the SVG into a simple animation :)
I have the following SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="150" viewBox="0 0 800 150" xml:space="preserve">
<linearGradient id="SVGID_0" gradientUnits="userSpaceOnUse" x1="-400" y1="-150" x2="-400" y2="0">
<stop offset="0%" style="stop-color:rgb(255,64,64);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(230,57,155);stop-opacity: 1"/>
</linearGradient>
<rect x="-400" y="-75" rx="0" ry="0" width="800" height="150" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: url(#SVGID_0); fill-rule: nonzero; opacity: 1;" transform="translate(400.5 75.5)"/>
</svg>
I am converting this to PDF using TCPDF:
$pdf->ImageSVG($file='images/testsvg.svg', $x=0, $y=0, $w='', $h='', $align='', $palign='', $border=0, $fitonpage=true);
As you can see from the image below, the gradient is applied wrongly.
Based on the illustrator image, it seems like TCPDF applies the center of the gradient to the bottom edge. If I manually move the center to the top edge then it looks very close to the original.
Any idea how I can fix this?
I think it's because of how the rect is positioned. It actually starts outside the viewbox and then both the gradient and the box get transformed. For example the box and the gradient x parameter are both -400. This is overly complex and I think some of the parameters are getting cancelled out by the $fitonpage=true parameter or the translations are being applied differently:
<rect x="-400" y="-75" rx="0" ry="0" width="800" height="150" style="... transform="translate(400.5 75.5)"/>
Based on the supplied examples there isn't really any point to this trickery. The only purpose appears to be modifying the gradient start and end colors. I would just move the rect to start at 0,0, remove the transforms, and then modify the gradient colors and stops to achieve the same effect the correct way:
<linearGradient y2="150" x2="0" y1="0" x1="0" gradientUnits="userSpaceOnUse" id="SVGID_0">
<stop
style="stop-color:#f13c73;stop-opacity:1"
id="stop4139"
offset="0" />
<stop
style="stop-color:#e6399b;stop-opacity:1"
id="stop4141"
offset="0.40" />
</linearGradient>
<rect
id="rect4143"
style="opacity:1;fill:url(#SVGID_0);fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none"
height="150"
width="800"
ry="0"
rx="0"
y="0"
x="0" />
The changes that matter are the removal of all the strange negative offsets on the rect and gradient and the change of the gradient stop colors and position to recreate the same gradient without the need to use cropping and transforms.
We would like to blend colors specified at triangle vertices using linear interpolation (e.g. like OpenGL) in a vector graphics file like a pdf.
This example blends red, blue and green:
Is this possible in PDF? If not, then SVG or some other well-supported vector graphics file-format?
It seems gradient meshes are powerful, but can they be degenerated to exactly reproduce linear interpolation?
The pure answer to your question is "no". You can't do three-point gradients in SVG or PDF.
However you can reproduce that image easily enough with a couple of gradients and a mask.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 100 86.6">
<defs>
<linearGradient id="bluegreen" gradientUnits="objectBoundingBox" x1="0.5" x2="1" y2="1">
<stop offset="0%" stop-color="#0000ff"/>
<stop offset="100%" stop-color="#00ff00"/>
</linearGradient>
<linearGradient id="fader" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0.75" y2="0.5">
<stop offset="0%" stop-color="white" />
<stop offset="100%" stop-color="black" />
</linearGradient>
<mask id="redmask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path d="M 0.5,0 L 1,1 0,1 Z" fill="url(#fader)" />
</mask>
</defs>
<g>
<path d="M 50,0 L 100,86.6 0,86.6 Z" fill="url(#bluegreen)"/>
<path d="M 50,0 L 100,86.6 0,86.6 Z" fill="#ff0000" mask="url(#redmask)"/>
</g>
</svg>
http://jsfiddle.net/P48FD/
Update: Actually, what was I thinking? :/ You don't need a mask. You can do it just with two linear gradients.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 100 86.6">
<defs>
<linearGradient id="bluegreen" gradientUnits="objectBoundingBox" x1="0.5" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#0000ff"/>
<stop offset="100%" stop-color="#00ff00"/>
</linearGradient>
<linearGradient id="redfade" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0.75" y2="0.5">
<stop offset="0%" stop-color="#ff0000" />
<stop offset="100%" stop-color="#ff0000" stop-opacity="0" />
</linearGradient>
</defs>
<g>
<path d="M 50,0 L 100,86.6 0,86.6 Z" fill="url(#bluegreen)"/>
<path d="M 50,0 L 100,86.6 0,86.6 Z" fill="url(#redfade)"/>
</g>
</svg>
http://jsfiddle.net/Q3qjB/