前端 - svg 中如何让渐变填充沿着路径方向进行填充?
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1">
<stop class="stop1" offset="0%" />
<stop class="stop2" offset="50%" />
<stop class="stop3" offset="100%" />
</linearGradient>
<style>
<![CDATA[
path { stroke: url(#Gradient1); }
.stop1 { stop-color: red; }
.stop2 { stop-color: black; }
.stop3 { stop-color: blue; }
]]>
</style>
</defs>
<path d="M 10 10 C 20 80, 80 40, 100 100 l -20 40 -60 -20" stroke-width="10" fill="transparent"/>
</svg>
在对路径进行填充时,发现渐变的填充其实是按照一个类似矩形框中进行填充的,因此在路径的末端,会变为红色。有什么方法可以让渐变的填充是按照路径的方向进行填充,也就是路径末端是蓝色。
共有1个答案
stroke中支持线性渐变和径向渐变，都做不到上面要求；
想实现上面效果，貌似只能用canvas或者paint函数自己画了
-
我有一个箭头头的路径，我想做一个颜色过渡动画，从左到右。 我已经为线和箭头做了这件事，但它似乎不是同步的。我希望线和箭头都过渡颜色无缝。 CSS
-
问题内容： 我正在尝试从左到右制作箭头动画，箭头路径的代码如下所示： 以上是我的箭头的svg路径内容。 有人可以帮助我如何从左到右填充路径。等待快速响应 问题答案： 您可以通过仅对中的s设置动画来完成此操作。 这是如何工作的，我们有一个线性梯度表示从绿色到白色的突然变化。所述元件移动位置，即突然变化，从左边的箭头（偏移= 0）到右侧的（偏移量=“1”）。 请注意，SVG 元素在IE中不起作用。如果
-
我维护了一个用flash编写的绘图工具，该工具将其数据保存为荧光笔工具的一系列点，这些点描述了一条粗大的、填充的徒手/点对点线的轮廓。例如，如果用户画了一条水平线，路径将是从左到右的点序列，然后是向下10像素的线，相同的点序列反向回到原点下方10px，那么路径就关闭了 另一个工具通过将json点列表转换为svg路径来周期性地光栅化Flash的数据。路径命令类似于“M 123,456l 1,2 3,
-
问题内容： 是否可以为SVG 元素设置a ？ 例如，如果设置了element ，则CSS样式有效，但都不起作用。 问题答案： 您可以通过将背景变成图案来实现： 根据您的图像调整宽度和高度，然后从这样的路径中引用它：
-
我有一个SVG元素：
-
我的D3.js代码生成以下HTML（取自inspect元素） 路径呈现一个底部有文本的圆圈。 最终，我希望文本位于SVG元素边界内的圆圈下方。如果SVG元素更大，G元素呈现得更大。我需要控制G元素的大小或路径元素的大小。 粗略的谷歌搜索没有多大帮助 谢谢你的洞察力。