Question

我在svg group元素中使用了两条路径作为直线和圆，并为圆和直线路径应用了相同的渐变颜色。

这是我的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

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

谢谢， Bharathi。

Answer 1

你有两个问题。

你没有关闭你的元素。 SVG元素不像html那样自动关闭它们需要结束/＆gt;而不是＆gt;
objectBoundingBox渐变要求形状不是完全水平或垂直的。您需要创建渐变userSpaceOnUse才能将其应用于水平线。

像这样的东西

＆＃13;

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

＆＃13;

您可能需要调整y1和y2值以获得所需的渐变。我不认为IE支持不同的单位，这就是它工作的原因＆＃34;那里。

Answer 2

请关闭u r sample中的路径标记。

渐变颜色未应用于SVG

2 个答案: