我阅读了 SVG 文档，但找不到解决方案。如何绘制如下图所示的 SVG 椭圆渐变？
我使用 svg RadialGradient 但它渲染了我不想要的圆。所以接下来我画椭圆并用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>最佳答案
要获得第一个屏幕截图中的图像，您需要应用蒙版。
mask 由两个矩形组成:
第一个矩形 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>关于svg - 如何绘制椭圆渐变？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61893541/