分类
svg

数据大屏边框(1)续

第一次对数据大屏边框的尝试是对svg的基础运用。其中会造成各种问题导致无法在项目中实用。这次会在前一次的基础上做的一些优化。

数据大屏边框(1)

效果图

此次的优化项

1.动画

开头的动画采用smil(同步多媒体集成语言)动画的形式,每一个svg属性下都可以采用一个或多个smil动画。且由于同步的特性,一个动画的开始可以由另一个动画的结束为触发。第一个动画的开始采用了这一段代码。

<animate id="a1" attributeName="fill" restart="never" begin="indefinite" to="rgba(19,101,233,.4)" fill="freeze" dur="3s"></animate>
<script>
    document.addEventListener('click', function() {
        document.getElementById('a1').beginElement();
    })
</script>

而动画的效果是基于stroke,stroke-dasharray,stroke-dashoffset这三个属性。

 <path d="M 673 300 L 678 300 L 678 320 L 673 320 z" fill="transparent" stroke="rgb(14,80,191)" stroke-width="2"  stroke-dasharray="100,100" stroke-dashoffset="100" stroke-linejoin="round">
            <animate attributeName="stroke-dashoffset" dur="1s" to="0" begin="a2.end + 2.6" fill="freeze"></animate>
        </path>

以这段代码为例,首先这是一个小方块,它的初始状态里有stroke-dasharray=“100,100”,stroke-dasharray是将描边以虚线的形式展现,作用是100长度实线,100长度虚线,100长度实线,100长度虚线。。。显然,这个path组成的小方块并没有100那么长,但是没关系,只要比它实际的长度长就可以,这个实际的长度测算方式是在html页面中我们所能看到的长度,如果它被放大,那么实际的长度也会变大。而stroke-dashoffset的作用是偏移量,数值为正向左偏移。因此就变成了初始状态下,我们看不到东西的情况。

其次动画的状态也需要说明。attributeName=”stroke-dashoffset” – 动画改变的属性,fill=“freeze”-动画结束后以冻结的方式,不会回到初始状态。

2.适配各种大小

ui姐姐给出的设计稿是一张图片,因此每个元素的尺寸都是固定的,但是实际上我们的展示内容不可能与设计图的大小完全一致。所以需要加一些属性。

viewBox=“0 0 697 462”以x=0,y=0为基点,697为宽度,462为高度。

preserveAspectRatio=”none”,大小改变后的等比例收缩方式,none说明不按照等比例收缩

3.大小按等比例缩放后描边大小会跟着改变,但是不想让它改变

设置style属性

 path{
            vector-effect: non-scaling-stroke;
 }

(完)

由zhuishao

github:https://github.com/zhuishao/

发表评论

电子邮件地址不会被公开。 必填项已用*标注