Gradient color is not applied to line path in SVG

Question

I have used two path in my svg group element for a line and circle and applied same gradient color for both circle and line path.

Here is my SVG code.

<svg id="legend_scrollcontent_svg" class="e-designerhide" style="height: 37px; width: 75px;">
<g id="scrollcontent_svg_Legend">
<defs>
<linearGradient id="scrollcontent_svg_legend0Gradient" x1="0%" y1="0%" x2="0%" y2="558%">
<stop offset="0%" stop-color="#F34649" stop-opacity="1">
<stop offset="100%" stop-color="#B74143" stop-opacity="1">
</linearGradient>
</defs>
<g id="scrollcontent_svg_Legend0" cursor="pointer">
<path id="scrollcontent_svg_LegendItemShape0" fill="url(#scrollcontent_svg_legend0Gradient)" stroke-width="2" stroke="url(#scrollcontent_svg_legend0Gradient)" opacity="1" d="M 7.5 19.5 L 12 19.5 M 18 19.5 L 22.5 19.5" lgndctx="true">
<path id="scrollcontent_svg_LegendItemShape1" fill="transparent" stroke-width="2" stroke="url(#scrollcontent_svg_legend0Gradient)" opacity="1" d="M 12 19.5 a 3 3 0 1 0 6 0 a 3 3 0 1 0 -6 0" lgndctx="true">

</g>
</g>
</svg>

In the first link i have added two path in the group and applied gradient color.. But the gradient color is not applied.

In the second link, i have removed line path and now it is applying gradient color to circle path

Anyone can help me on resolving this issue.

Thanks, Bharathi.

Answer 1

You've two problems.

1. you're not closing your elements. SVG elements are not self closing like html ones are they need to end /> and not >
2. objectBoundingBox gradients require shapes not to be entirely horizontal or vertical. You're going to need to make the gradient userSpaceOnUse in order for it to apply to the horizontal line.

Something like this

<svg id="legend_scrollcontent_svg" class="e-designerhide" style="height: 200px; width: 200px;" viewBox="5 5 20 20">
<g id="scrollcontent_svg_Legend">
<defs>
<linearGradient id="scrollcontent_svg_legend0Gradient" x1="0%" y1="0%" x2="0%" y2="558%" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#F34649" stop-opacity="1"/>
<stop offset="100%" stop-color="#B74143" stop-opacity="1"/>
</linearGradient>
</defs>
<g id="scrollcontent_svg_Legend0" cursor="pointer">
<path id="scrollcontent_svg_LegendItemShape0" fill="url(#scrollcontent_svg_legend0Gradient)" stroke-width="2" stroke="url(#scrollcontent_svg_legend0Gradient)" opacity="1" d="M 7.5 19.5 L 12 19.5 M 18 19.5 L 22.5 19.5" lgndctx="true"/>
<path id="scrollcontent_svg_LegendItemShape1" fill="transparent" stroke-width="2" stroke="url(#scrollcontent_svg_legend0Gradient)" opacity="1" d="M 12 19.5 a 3 3 0 1 0 6 0 a 3 3 0 1 0 -6 0" lgndctx="true"/>

</g>
</g>
</svg>

You may need to adjust the y1 and y2 values to get the gradient you want. I don't think IE supports different units which is why it "works" there.

Answer 2

Please close the path tag in u r sample.