Menu
I read SVG docs but I can't find solution to this. How to draw in SVG ellipse gradient like in picture below?
I use svg radialGradient but it renders circle which is not I want. So next I draw ellipse and fill it with radialGradient and I end up with this:
I use svg mask to crop ellipse but it not working as I expected. Is there any way to achieve that?
Link to svg code: https://codesandbox.io/s/fancy-dew-skokw
<svg
tabindex="0"
focusable="true"
shape-rendering="optimizeSpeed"
viewBox="0 0 640 545"
style="border: 1px solid blue; width: 100%; height: 100%;"
>
<g id="text_7">
<rect
x="138"
y="455"
width="355"
height="60"
style=" mask: url('#mask_ellipse_7)'"
></rect>
<ellipse
cx="292"
cy="80"
rx="116"
ry="51"
transform="matrix(1,0,0,1,65,400)"
style="fill:url('#bg-ellipse-gradient_7'); "
></ellipse>
<text font-size="12" transform="matrix(1,0,0,1,65,400)">
<tspan x="75" y="67" dy="0" fill="#FF0000" fill-opacity="1">
Lorep ipsum - radial gradient
</tspan>
</text>
<defs>
<radialGradient
id="bg-ellipse-gradient_7"
fx="74%"
fy="37%"
>
<stop
stop-color="#00FFFF"
stop-opacity="1"
offset="0.000000"
></stop>
<stop
stop-color="#FFFF00"
stop-opacity="1"
offset="0.500000"
></stop>
<stop
stop-color="#000000"
stop-opacity="1"
offset="1.000000"
></stop>
</radialGradient>
</defs>
<defs>
<mask
id="mask_ellipse_7"
cx="292"
cy="80"
rx="116"
ry="51"
transform="matrix(1,0,0,1,65,400)"
style="fill:url('#bg-ellipse-gradient_7'); "
></mask>
</defs>
</g>
</svg>
612
To use a gradient, we have to reference it from an object's fill or stroke attributes. This is done the same way you reference elements in CSS, using a url . In this case, the url is just a reference to our gradient, which I've given the creative ID, "Gradient". To attach it, set the fill to url(#Gradient) , and voila!
The <ellipse> element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.
SVG provides for two types of gradients: linear gradients and radial gradients. Once defined, gradients are then referenced using 'fill' or 'stroke' properties on a given graphics element to indicate that the given element shall be filled or stroked with the referenced gradient.
The <linearGradient> element is used to define a linear gradient. The <linearGradient> element must be nested within a <defs> tag. The <defs> tag is short for definitions and contains definition of special elements (such as gradients).
The SVG element can support to produce a smooth surface of colors in a straight way which is called a linear SVG gradient. This must include an id attribute to describe it after. We can draw ellipse using <ellipse> tag and uses <linearGradient> tag to apply an SVG linear gradient.
The SVG element can support to produce a smooth surface of colors in a straight way which is called a linear SVG gradient. This must include an id attribute to describe it after. We can draw ellipse using <ellipse> tag and uses <linearGradient> tag to apply an SVG linear gradient. The <linearGradient> element should be nested within a <defs> tag.
A gradient is a smooth transition from one color to another. In addition, several color transitions can be applied to the same element. The <linearGradient> element is used to define a linear gradient. The <linearGradient> element must be nested within a <defs> tag.
<ellipse> element is used to draw ellipse with a center point and given two radii. Following is the syntax declaration of <ellipse> element. We've shown main attributes only. cx − x-axis co-ordinate of the center of the ellipse. Default is 0. cy − y-axis co-ordinate of the center of the ellipse. Default is 0. rx − x-axis radius of the ellipse.
To get the image as in the first screenshot, you need to apply a mask.
The mask is made up of two rectangles:
The first rectangle fill ="black" cuts everything
The second rectangle fill ="white" leaves the desired part with an ellipse
<mask id="mask_ellipse_7" >
<rect width="100%" height="100%" fill="black" />
<rect x="138" y="455" width="355" height="60" stroke="red" fill="white" />
</mask>
Below is the full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<svg
tabindex="0"
focusable="true"
shape-rendering="optimizeSpeed"
viewBox="0 400 640 545"
style="border: 1px solid blue; width: 100%; height: 100%;"
>
<g id="text_7" style="mask:url(#mask_ellipse_7)">
<rect
x="138.734375"
y="455.703125"
width="355"
height="60"
fill="black"
></rect>
<ellipse
cx="292.000183"
cy="80.999115"
rx="116.99969500000003"
ry="51.003084999999984"
transform="matrix(1,0,0,1,65,400)"
style="fill:url('#bg-ellipse-gradient_7'); "
></ellipse>
<text font-size="12" transform="matrix(1,0,0,1,65,400)">
<tspan x="75" y="67" dy="0" fill="#FF0000" fill-opacity="1">
Lorep ipsum - radial gradient
</tspan>
</text>
</g>
<defs>
<radialGradient
id="bg-radial-gradient_7"
gradientTransform="matrix(1,0,0,1,65,400)"
gradientUnits="userSpaceOnUse"
fx="304"
fy="49"
cx="292.000183"
cy="80.999115"
r="127.63323747993802"
>
<stop
stop-color="#00FFFF"
stop-opacity="1"
offset="0.000000"
></stop>
<stop
stop-color="#FFFF00"
stop-opacity="1"
offset="0.500000"
></stop>
<stop
stop-color="#000000"
stop-opacity="1"
offset="1.000000"
></stop>
</radialGradient>
</defs>
<defs>
<radialGradient
id="bg-ellipse-gradient_7"
fx="74.32765053294222%"
fy="37.120593444654716%"
>
<stop
stop-color="#00FFFF"
stop-opacity="1"
offset="0.000000"
></stop>
<stop
stop-color="#FFFF00"
stop-opacity="1"
offset="0.500000"
></stop>
<stop
stop-color="#000000"
stop-opacity="1"
offset="1.000000"
></stop>
</radialGradient>
</defs>
<defs>
<mask
id="mask_ellipse_7" >
<rect width="100%" height="100%" fill="black" />
<rect x="138" y="455" width="355" height="60" stroke="red" fill="white" />
</mask>
</defs>
</svg>
</body>
</html>You can do this with just the <rect> and a <radialGradient>:
cx/cy to place the gradient halfway outside the rectangle, and r to set the size of the gradient.gradientTransform to get the right shape.<svg width="400" height="200">
<defs>
<radialGradient id="bg-ellipse-gradient_7"
cx="60%" cy="5%" r="40%"
gradientTransform="scale(1, 3)">
<stop stop-color="#00FFFF" stop-opacity="1" offset="0.0" />
<stop stop-color="#FFFF00" stop-opacity="1" offset="0.5" />
<stop stop-color="#000000" stop-opacity="1" offset="1.0" />
</radialGradient>
</defs>
<rect x="50" y="75" width="300" height="50" fill="url(#bg-ellipse-gradient_7)" />
</svg>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
