使用svg渐变修饰rect做成的图案

马黑黑

以下代码，利用svg线性渐变对rect矩形勾勒出所需形状，存放在defs标签内待用，然后通过3个use标签实例化并各自旋转一定角度，最后加一个圆在中央。圆有鼠标指针移动交互，不过存为.svg文档后当做img或背景图片使用时该交互行为失效。

<svg width="200" height="200" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
	<style>
		#ct{ cursor:pointer;transition:1s; }
		#ct:hover{ r: 26px; }
	</style>
	<defs>
		<linearGradient id="lgd1" x1="1" x2="0" y1="0" y2="1">
			<stop offset="0%" stop-color="transparent" />
			<stop offset="45%" stop-color="transparent" />
			<stop offset="50%" stop-color="lightgreen" />
			<stop offset="55%" stop-color="transparent" />
			<stop offset="100%" stop-color="transparent" />
		</linearGradient>
		<g id="rect1"><rect x="-70" y="-70" width="140" height="140" fill="url(#lgd1)" /></g>
	</defs>
	<use x="0" y="0" href="#rect1" transform="rotate(0)" />
	<use x="0" y="0" href="#rect1" transform="rotate(120)" />
	<use x="0" y="0" href="#rect1" transform="rotate(240)" />
	<circle id="ct" cx="0" cy="0" r="18" fill="#00800080" />
</svg>

点击查看效果

红影

<rect x="-70" y="-70" width="140" height="140"。。。这个是为了把矩形画到原点用的吧。
<linearGradient id="lgd1" x1="1" x2="0" y1="0" y2="1">这个没看懂，为什么渐变的起点和终点这么小？

马黑黑

红影 发表于 2024-9-21 19:52

第一个问题：看viewBox属性。这是将矩形画在中央；

第二个问题：0=0%，1=100%，这是浮点数表示法，可以使用百分比如果愿意。

红影

哦，取一根看了看，大概知道点了，这个x1="1" x2="0" y1="0" y2="1"是为了取个方向，后面还有offset呢，通过颜色的设计，就可以让矩形呈现出棍的样子了。

红影

哦，取一根看了看，大概知道点了，这个x1="1" x2="0" y1="0" y2="1"是为了取个方向，后面还有offset呢，通过颜色的设计，就可以让矩形呈现出棍的样子了。

红影

哦，原来1是浮点数，知道了还是写成百分比比较好理解点。

马黑黑

红影 发表于 2024-9-21 20:09
哦，原来1是浮点数，知道了还是写成百分比比较好理解点。

百分比数值较长，有时候能短则短，不是啥都是越唱越好

花飞飞

这个结构乍一看跟之前的《西亚风光》组合小播有点像，十字旋转叠加，这个是一根旋转叠加。。

花飞飞

用渐形绘形状是被老师用到极致了，200*200的方块渐变后成一条漂亮的线条，这个创意也是没谁了。

花飞飞

小辣椒

红影

马黑黑 发表于 2024-9-21 20:38
百分比数值较长，有时候能短则短，不是啥都是越唱越好

真会偷懒

马黑黑

红影 发表于 2024-9-21 21:25
真会偷懒

哎呀，你还嫌svg代码不够长

马黑黑

红影 发表于 2024-9-21 20:01
哦，取一根看了看，大概知道点了，这个x1="1" x2="0" y1="0" y2="1"是为了取个方向，后面还有offset呢，通 ...

大概如此

马黑黑

花飞飞 发表于 2024-9-21 21:03
#ct{ cursor:pointer;transition:1s; }
                #ct:hover{ r: 26px; }
       

你这个也太漂亮了吧

马黑黑

小辣椒 发表于 2024-9-21 21:09

谢顶

马黑黑

花飞飞 发表于 2024-9-21 21:03
用渐形绘形状是被老师用到极致了，200*200的方块渐变后成一条漂亮的线条，这个创意也是没谁了。

哪里哪里，都有都有

红影

马黑黑 发表于 2024-9-21 21:31
大概如此

原来这小棍的粗细也可以在offset的百分比里调的呢，刚才跑去试了半天，不过我都是单根试的，想看看都会出现什么效果。

红影

马黑黑 发表于 2024-9-21 21:29
哎呀，你还嫌svg代码不够长

不管长短，写成习惯的多好，前面就不会那么懵了

马黑黑

红影 发表于 2024-9-21 21:48
不管长短，写成习惯的多好，前面就不会那么懵了

好吧