渐变颜色不适用于SVG中的线路径 [英] Gradient color is not applied to line path in SVG

问题描述

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

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.

这是我的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.. But the gradient color is not applied.

在第二个链接中，我删除了直线路径，现在它将渐变颜色应用于圆形路径

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

Anyone can help me on resolving this issue.

谢谢，巴拉提.

推荐答案

您遇到两个问题.

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支持不同的单元，这就是为什么它在那里起作用"的原因.

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.

这篇关于渐变颜色不适用于SVG中的线路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！