javascript - 渐变颜色不适用于 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

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

谢谢，巴拉蒂。

Answer 1

你有两个问题。

1. 你没有关闭你的元素。 SVG 元素不会像 html 元素那样自动关闭，它们需要结束/> 而不是 >
2. objectBoundingBox 渐变要求形状不能完全水平或垂直。您将需要制作渐变 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 支持不同的单位，这就是它在那里“工作”的原因。