Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

svg - how to draw ellipse gradient?

Tags:

svg

radial-gradients

I read SVG docs but I can't find solution to this. How to draw in SVG ellipse gradient like in picture below?

reference gradient in graphics software

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: enter image description here

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>
like image 612
miuosh Avatar asked May 19 '20 14:05

miuosh

People also ask

How do you create a gradient in SVG?

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!

How do you draw an ellipse in SVG?

The <ellipse> element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.

Can svgs have gradients?

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.

Which tag is used to define the linear 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).

How to draw an ellipse using SVG?

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.

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

What is a linear gradient in HTML?

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.

How to draw ellipse with a center point and two radii?

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

2 Answers

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>
like image 57
Alexandr_TT Avatar answered Oct 08 '22 01:10

Alexandr_TT

You can do this with just the <rect> and a <radialGradient>:

  • Use cx/cy to place the gradient halfway outside the rectangle, and r to set the size of the gradient.
  • The gradient still has the flat shape of the rectangle though, so stretch it with 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>
like image 36
Sphinxxx Avatar answered Oct 08 '22 03:10

Sphinxxx
Sign in to Comment

Related questions

d3 zoom function issues in v4
How to get rotated svg text bounds in javascript programmatically
Change html svg cricle's fill with css when clicked on
Combine clipPath, pattern, and linearGradient in SVG
svg as background-image: xlink to id in original document
"Background" style property ignored for <svg> elements inside of other <svg> elements
Stretch SVG to fit 100% height and width of its parent
Wait for Font Awesome JS to convert i to svg before binding
Transform CSS clip-path with mixed (fixed and percentage) values to SVG clip-path
Create a equilateral triangle using SVG in HTML with base and height 100px
IDML Polygon to SVG
How inherit stroke color in SVG? (Not fill, but stroke color)
React Native svg clip path on image not working
IE11 - Object doesn't support property or method 'contains'
Create Triangle Menu
resize svg wrapped in div that is wrapped in div
How to load local svg file with react-native-svg library
SVG fill area under the path only
SVG Position text relative to parent <g>
Please can anyone explain the SVG polygon points? [closed]

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!