svg的path的应用

时间: 2019-09-19阅读: 603标签: svg

path标签的d属性的命令有

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

我们这里只要用到M L A 和Z命令就可以了,M L 和Z命令比较简单,这里详细讲解A命令,A命令是画弧的命令,里面的A命令有 7个参数:rx ry x-axis-rotation large-arc-flag sweep-flag x y
rx ry 表示椭圆的x半径和y半径,两个一样画出来的就是圆,最后两个的参数x y表示的是终点坐标,接下来的三个参数比较复杂,这里开始详细讲解:
我们来看一张图:


图中的两个点Arc start 和Arc end是起始点和终止点,假设我们已经知道,通过这两个点和半径可以得出两个椭圆,四条弧,那该怎样确定用那条弧呢?在起始点和终止点之间连一条线,在线的左半部分sweep-flag的值为0,在右边为1,而当large-arc-flag为1时表示取的是大弧,为0就表示取小弧,这两个参数的四种取值就可以分别取出这四条弧。large-arc-flag(约定名称叫大弧,下文也这么叫)=0就表示取图中B和C的两条加黑的小弧,而sweep-flag(约定名称叫镜像,下文也这么叫)=0表示取B中的那条小弧,等于1表示取图C中的那条,(大弧,镜像)的四种取值:(0,0)、(0,1)、(1,0)、(1,1)就分别对应图中的B、C、D、E。x-axis-rotation表示的就是x轴的旋转角度,如图F

好,A命令的参数讲完之后我们开始讲用path标签画扇形的原理:

再来看张图:

扇形图是圆的一部分,要画出图中的扇形图分三步:
#1:从圆心(400,300)画一条直线到弧的起点位置
#2:从弧的起点位置画一条弧到终点位置
#3:闭合路径
第一条线比较好画M L命令可以实现,但是我们首先要求出起点的坐标x,y。画第二条弧的时候还要求出终点坐标,最后第三条线用Z命令直接闭合就可以了。
所以这里我们要写一个求坐标的函数,还要注意所有的度数都得转成弧度制,再写一个转弧度制的函数,怎么求弧的起点左边x、y?x坐标就是圆心的cx坐标+图示的线段a,而线段a=r*sin(ang),r表示半径,ang表示角度,角度是我们自己给的,终点坐标同理。

这里写的时候用一个数组存d属性的命令,最后用空格拼接在统一设置。


注意:

在画扇形图的时候,当终点和起点之间的角度小于180°的时候,large-arc-flag取0,大于180°的时候取1,所以我们可以用三元运算符实现 ‘?:’; 

还有就是Arc start和Arc end两个点如果重合,svg将画不出任何曲线。因为经过一个点的弧有无数条

函数 return { x:cx+r*Math.sin(d2a(ang)), y:cy-r*Math.cos(d2a(ang)) } } let arr=[];//存d属性的参数 //#1 let {x:x1,y:y1}=pointe(ang1);//求出弧的起点坐标,线的终止点,命名x1,y1 arr.push(`M ${cx} ${cy} L ${x1} ${y1}`);//画出从圆心到弧的线,但是这里还没画,只是添加到数组里了,最后的时候在一起画 //#2 let {x:x2,y:y2}=pointe(ang2);//求出弧的终止点,命名x2,y2 arr.push(`A ${r} ${r} 0 ${ang2-ang1>=180?1:0} 1 ${x2} ${y2}`);//画出第二条弧,这里也还没开始画,只是加到数组里了 //#3 arr.push('Z')//闭合 oP1.setAttribute('d',arr.join(' '));//拼接数组里的字符,开始画 } " title="" data-original-title="复制">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #oSvg{
            background: rgba(187, 187, 187, 0.2);
        }
    </style>
    <script>
        window.onload=function(){
            let oP1=document.getElementById('p1');//获取path对象
            let cx=300,cy=300,r=200;//圆心坐标、半径
            let ang1=120,ang2=420;//角度
            
            function d2a(n){//角度转弧度
                return n*Math.PI/180;
            }
            function pointe(ang){//求坐标函数
                return {
                    x:cx+r*Math.sin(d2a(ang)),
                    y:cy-r*Math.cos(d2a(ang))
                }
            }
            let arr=[];//存d属性的参数
            //#1
            let {x:x1,y:y1}=pointe(ang1);//求出弧的起点坐标,线的终止点,命名x1,y1
            arr.push(`M ${cx} ${cy} L ${x1} ${y1}`);//画出从圆心到弧的线,但是这里还没画,只是添加到数组里了,最后的时候在一起画
            //#2
            let {x:x2,y:y2}=pointe(ang2);//求出弧的终止点,命名x2,y2
            arr.push(`A ${r} ${r} 0 ${ang2-ang1>=180?1:0} 1 ${x2} ${y2}`);//画出第二条弧,这里也还没开始画,只是加到数组里了
            //#3
            arr.push('Z')//闭合
            oP1.setAttribute('d',arr.join(' '));//拼接数组里的字符,开始画
        }
    </script>
</head>
<body>
    <svg width='800' height='600' id="oSvg">
        <path id="p1" style="stroke: rgb(255, 136, 0); stroke-width:5;fill:none"></path>
    </svg>
</body>
</html>
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6039

如何在vue项目中优雅地使用SVG

安装svg-sprite-loader。通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理,在static下新建svg文件夹,用来放置当做icon使用的svg,使用include,include和img做区分。然后修改webpack.base.conf.js配置,这样svg-sprite-loader只会处理我们指定的static/svg下的文件

使用SVG symbols建立图标系统完整指南

从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont。现在,一种全新的图标使用方式开始流行了起来——SVG symbols图标。

巧妙运用clip-path,实现CSS形状变换

CSS3的clip-path,这个clip-path看起来有点眼熟,因为它原本就存在于SVG里头,利用掩码(剪裁)的方法,连接坐标绘制掩码区域,就可以做出许多不同的形状,让底色或底图显现,随着浏览器对于CSS3的支持度大幅提升

10个开源SVG图标库

在国内,我想大家基本上都是用阿里的iconfont图标库,这里介绍10个其他的开源图标库,下面列出的所有库都是完全开源的,因为我已经检查了许可条款和条件。

SVG弧形进度环实现

先要了解svg能怎么实现的这个问题,svg的哪些元素能实现?A命令可以画椭圆和圆形,rx ry分别表示两个轴的半径,x-axis-rotatio表示x轴的旋转情况,我这里的圆弧是正置的,所以值设为0即可。

通过css改变svg img的颜色

一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景?但是为了更小的开销,一般css为更好的解决方案

封装全局icon组件 svg (仿造element-ui源码)

引入 svg-sprite-loader 插件,vue-cli项目默认情况下会使用 url-loader 对svg进行处理,会将它放在/img 目录下,所以这时候我们引入svg-sprite-loader 会引发一些冲突。使用 webpack 的 exclude和 include

使用vue组件加载SVG图片步骤

使用vue加载SVG图片,有两种方法,一种是雪花loader,一种是vue-svg-loader(官网推荐)。在自己的项目中,本次使用vue-svg-loader加载svg图片,并且对图片进行属性修改。操作步骤:

一步步教你用 CSS 为 SVG 添加过滤器

SVG就存在了,但仍有一些有趣的方法去用它。在本教程中,重点将放在 SVG 的过滤器上 —— 但不只是将它们应用于 SVG 图像,我将向你展示如何将它们应用于任何常规页面的内容上。实际上我们是通过告诉 CSS 过滤器所拥有的 ID,然后再把过滤器应用于 SVG 的方式来实现。

关于Data URLs svg图片显示出错和浏览器URL hash #

在使用生成的svg图作为<img>标签是src值时,发现有部分浏览器显示异常,所以这里记录下,在<img src=\\\"Data URLs\\\">中,Data URLs格式与显示情况如下:

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广