时间戳

首页 > 解决方案 > svg - 如何绘制椭圆渐变？

svg - svg - 如何绘制椭圆渐变？

问题描述

我阅读了 SVG 文档，但找不到解决方案。如何绘制如下图所示的 SVG 椭圆渐变？

图形软件中的参考梯度

我使用 svgradialGradient 但它呈现了我不想要的圆形。所以接下来我画椭圆并用radialGradient填充它，我最终得到了这个： 在此处输入图像描述

我使用 svg 蒙版来裁剪椭圆，但它没有按预期工作。有没有办法做到这一点？

svg 代码链接： 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>

标签： svgradial-gradients

解决方案

要获得第一个屏幕截图中的图像，您需要应用蒙版。

蒙版由两个矩形组成：第一个矩形fill ="black"切割所有东西
第二个矩形fill ="white"用椭圆留下所需部分 

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

以下是完整代码：

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

推荐阅读