SVG中的大小写问题

Question

我在SVG中使用两个路径绘制了直线和圆。我在SVG中使用渐变单位属性作为线性渐变，并且我已将渐变颜色应用于圆和线。在应用DOM时，＆＃34; gradientUnits＆＃34;属性应用为＆＃34; gradientunits＆＃34 ;;由于这个大写和小写的问题，我无法获得所需的输出。

图片1： 有问题 绿色矩形中提到。

图2：所需的输出 绿色矩形中提到。

这是我的SVG代码：

<svg id="legend_container_svg" class="e-designerhide" style="height: 40px; width: 71px;"> <g id="container_svg_Legend"> <defs> <linearGradient id="container_svg_legend0Gradient" x1="0%" y1="0%" x2="0%" y2="558%" gradientUnits="userSpaceOnUse"> <stop offset="0%" stop-color="#F34649" stop-opacity="1"></stop> <stop offset="100%" stop-color="#B74143" stop-opacity="1"></stop></linearGradient> </defs> <g id="container_svg_Legend0" cursor="pointer"> <path id="container_svg_LegendItemShape0" fill="url(#container_svg_legend0Gradient)" stroke-width="2" stroke="url(#container_svg_legend0Gradient)" opacity="1" d="M 7.5 21.5 L 12.5 21.5 M 22.5 21.5 L 27.5 21.5" lgndctx="true"></path> <path id="container_svg_LegendItemShape0" fill="transparent" stroke-width="2" stroke="url(#container_svg_legend0Gradient)" opacity="1" d="M 12.5 21.5 a 5 5 0 1 0 10 0 a5 5 0 1 0 -10 0" lgndctx="true"></path> </g> </g> </svg>

JavaScript中是否有任何方法可以在DOM中应用属性属性，就像我在源代码中给出的一样？

任何人都可以帮我解决问题。

谢谢，Dharani。