这几天写了一个关于d3小程序，所以分享一下。
是div和css做的
在这个图形中，最上面的使用了div中左右颜色渐变和上下透明度的使用。background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1%, rgba(0, 0, 0, 0.6) 46%, rgba(0, 0, 0, 0.2) 98%, rgba(255, 255, 255, 0.1) 99%),linear-gradient(to right,red,#5A4242); 这段代码是上面所做成的效果。下面用d3实现相同效果。
在d3中首先上面使用的是path绘制，由于在d3中无法同时使用两种渐变效果以及加上四周的阴影效果。所以要想达到可以考虑多个叠加来完成。使用两个path放在同一个位置，然后分别设置垂直和水平的颜色与透明度见面。至于周围的阴影效果，之前看了很多都是显示的在右下角，所有可以通过svg中的模糊，在最后面一层加入一个path，这样在设置模糊，从而整体看出来就有了一样的效果。
<linearGradient id="myLinearGradient1"
x1="0%" y1="0%"
x2="0%" y2="100%"
>
<stop offset="1%" stop-color="#FFFFFF" stop-opacity="0.1"/>
<stop offset="46%" stop-color="#000000" stop-opacity="0.6"/>
<stop offset="98%" stop-color="#000000" stop-opacity="0.2"/>
<stop offset="99%" stop-color="#FFFFFF" stop-opacity="0.1"/>
</linearGradient>
上面这个对应于css中的linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1%, rgba(0, 0, 0, 0.6) 46%, rgba(0, 0, 0, 0.2) 98%, rgba(255, 255, 255, 0.1) 99%)
这个<linearGradient id="aa"
x1="0%" y1="0%"
x2="100%" y2="0%"
>
<stop offset="1%" stop-color="#CC0000" stop-opacity="1"/>
<stop offset="99%" stop-color="#5A4242" stop-opacity="1"/>
</linearGradient>
对应于linear-gradient(to right,red,#5A4242)。
这几段代码中的百分数代表所对应的图形的位置。
网友评论