Градиентный цвет не применяется к линейному пути в SVG

Question

Я использовал два пути в элементе группы svg для линии и круга и применил тот же цвет градиента для кругового и линейного пути.

Вот мой SVG-код.

<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.. Но цвет градиента не применяется.

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

Любой человек может мне помочь в решении этого вопроса.

Thanks, Bharathi.

Answer 1

Пожалуйста, закройте тег пути в образце u r.

Answer 2

Вы имеете две проблемы.

1. Вы не закрываете свои элементы. Элементы SVG не являются самозакрывающимися, как html, они должны заканчивать /> и не>
2. Градиенты объектаBoundingBox требуют, чтобы фигуры не были полностью горизонтальными или вертикальными. Вам понадобится сделать градиент userSpaceOnUse, чтобы он применился к горизонтальной линии.

Что-то вроде этого

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

Вы, возможно, потребуется настроить значения y1 и y2, чтобы получить градиент вы хотите. Я не думаю, что IE поддерживает разные блоки, поэтому он «работает» там.