svg

Question

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

我使用 svg radialGradient 但它呈现的圆不是我想要的。所以接下来我画椭圆并用 radialGradient 填充它，最后我得到这个：

我使用 svg 蒙版来裁剪椭圆，但它没有像我预期的那样工作。有什么办法可以实现吗？

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

Answer 1

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

面具由两个矩形组成：第一个矩形 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>

Answer 2

您可以只使用 <rect> 和 <radialGradient>:

使用cx/cy将渐变放置在矩形的中间，r设置渐变的大小。
虽然渐变仍然具有矩形的平面形状，因此使用 gradientTransform 拉伸它以获得正确的形状。

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

svg - 如何绘制椭圆渐变？

svg - how to draw ellipse gradient?

radial-gradients