svg怎么画出一个有管壁的管道内部的颜色为红色管壁为灰色并给内部红色的部分添加一个流动的效果
以下是一个示例SVG代码,实现了一个有管壁的管道,内部为红色,管壁为灰色,并给内部红色的部分添加了一个流动的效果:
<svg viewBox="0 0 500 300">
<defs>
<linearGradient id="red-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FF9393" />
<stop offset="100%" stop-color="#FF3A3A" />
</linearGradient>
<pattern id="flow-pattern" x="0" y="0" width="10" height="20" patternUnits="userSpaceOnUse">
<path d="M5,0 L0,10 L10,10 Z" fill="#FF3A3A" />
<animateTransform attributeName="patternTransform" attributeType="XML" type="translate" from="0 0" to="10 0" dur="1s" repeatCount="indefinite" />
</pattern>
</defs>
<path d="M50,150 L450,150" stroke="#A9A9A9" stroke-width="20" />
<path d="M50,150 L450,150" stroke="url(#red-gradient)" stroke-width="10" />
<rect x="60" y="130" width="380" height="40" fill="url(#flow-pattern)" />
</svg>
解析:
-
定义了一个线性渐变,id为"red-gradient",从左到右从淡红色渐变到鲜红色,用于管道内部的颜色填充。
-
定义了一个图案,id为"flow-pattern",用于给管道内的红色部分添加流动的效果。图案的路径是一个三角形,填充为红色,然后使用animateTransform元素来实现图案的移动动画效果。
-
使用path元素绘制了两条路径,一条用于绘制管道的灰色边框,另一条用于绘制管道内部的红色部分。注意,红色路径的stroke属性指定了之前定义的线性渐变。
-
最后,使用rect元素绘制了一个矩形,x、y、width、height属性指定了矩形在SVG画布上的位置和大小,fill属性指定了之前定义的图案,用于填充管道内部的红色部分。
原文地址: https://www.cveoy.top/t/topic/b2km 著作权归作者所有。请勿转载和采集!