首页 > 其他分享 >前端学习教程-SVG描边属性

前端学习教程-SVG描边属性

时间:2022-12-07 17:05:12浏览次数:46  
标签:教程 定义 SVG stroke svg 描边 标签 添加 属性


前端学习教程-SVG描边属性,SVG提供了大量的笔画属性,实现各种各样的描边效果。我们来介绍一下:

stroke:笔画属性,

stroke-width:笔画宽度属性,

stroke-linecap:笔画线帽属性,

stroke-dasharray:虚线笔画属性。

所有的描边属性都可以应用于任何类型的线条、文本和元素的轮廓,如 circle。

首先我们学习 stroke 属性,它定义了一个元素的线条、文本或轮廓的颜色,值是任何合法的颜色值。

打开编辑器,新建一个 stroke-properties.html 文件,补全基础代码,在 body 里添加一个 svg 标签,定义属性 width 等于 300,height 等于 80。

在 svg 里添加 g 标签,给它定义一个 fill 属性,值为 none。

在 g 标签里添加 path 标签,定义属性 stroke 等于 red,再定义一个 d 属性,画一条线。

复制两个 path 标签。

修改线条的起点坐标。

修改第二条线的描边颜色为 black。修改第三条线的描边颜色为 blue。保存文件。

在浏览器中预览,三条颜色不同的线条就绘制好了。

前端学习教程-SVG描边属性_SVG

接下来我们学习 stroke-width 笔画宽度属性。它定义了一个元素的线条、文本或轮廓的厚度。值是一个数字。

回到编辑器,在上个 svg 结尾处添加一个 br 标签。回车换行。

添加一个新的 svg 标签,属性 width 等于 300,height 等于 80。

在 svg 里添加 g 标签,给它定义一个 fill 属性,值为 none。stroke 属性,值为 black。

在 g 标签里添加 path 标签,定义属性 stroke-width 等于 2,再定义一个 d 属性,画一条线。

复制两个 path 标签。

修改线条的起点坐标。

修改第二条线的线宽为 4。修改第三条线的线宽为 6。保存。

在浏览器中预览,三条线厚度不同的黑色线条就绘制好了。

前端学习教程-SVG描边属性_保存文件_02

接下来我们学习 stroke-linecap, 笔画线帽属性。它定义了一个开放路径的不同类型的结束点。它的值是有三个:

butt ([bʌt]) ,没有线帽,也是默认属性。

round ([raʊnd]),圆形线帽。

square ([skwer]),方形线帽。

回到编辑器,在上个 svg 结尾处添加一个 br 标签。回车换行。

添加一个新的 svg 标签,属性 width 等于 300,height 等于 80。

在 svg 里添加 g 标签,给它定义一个 fill 属性,值为 none。stroke 属性,值为 black,stroke-width 属性,值为 6。

在 g 标签里添加 path 标签,定义属性 stroke-linecap 等于 butt,再定义一个 d 属性,画一条线。

复制两个 path 标签。

修改线条的起点坐标。

修改第二条线的线帽属性为 round。修改第三条线的线帽属性为 square。保存。

在浏览器中预览,三条线帽不同的黑色线条就绘制好了。

接下来我们学习 stroke-dasharray 属性,dasharray,直译过来就是虚线序列。这个属性用来创建虚线。它的值是一个数字序列,以此定义虚线的线条与空隙的大小,序列值是个数字,至少定义两个值。比如,"20,20" (直接读 20 20),是这样的虚线;"20, 10, 5, 5 ,5, 10" 是这样的虚线!

回到编辑器,在上个 svg 结尾处添加一个 br 标签。回车换行。

添加一个新的 svg 标签,属性 width 等于 300,height 等于 80。

在 svg 里添加 g 标签,给它定义一个 fill 属性,值为 none。stroke 属性,值为 black,stroke-width 属性,值为 4。

在 g 标签里添加 path 标签,定义属性 stroke-dasharray 等于 "5,5" ,再定义一个 d 属性,画一条线。

复制两个 path 标签。

修改线条的起点坐标。

修改第二条线的虚线序列值。修改第三条线的虚线序列值。保存。

在浏览器中预览,三条不同的虚线就绘制好了。


标签:教程,定义,SVG,stroke,svg,描边,标签,添加,属性
From: https://blog.51cto.com/u_14573321/5919714

相关文章

  • 前端学习教程-SVG绘制路径
    前端学习教程-SVG绘制路径,在SVG中,使用path标签来定义一个路径。它是一个单标签,基本语法为:尖角号path,斜线尖角号。应用路径,我们可以绘制任意形状的图形。path标签的重要属......
  • Javascript-极速入门指南-3-jQuery使用教程
    内容概要jQuery类库类库jQuery简介jQuery的宗旨:Writeless,domore写的更少做的更多jQuery的特点为: 1.加载速度快 2.选择器更多更好用 3.一行代码走天下......
  • Chatgpt注册全流程教程
    Chatgpt注册全流程教程​ Chatgpt最近非常火爆,Chatgpt的注册有一定的要求。下面我为大家带来完整的注册流程,以及一些常见问题的解决方案。一.梯子​ 梯子的注册可以看这......
  • Zabbix6.0使用教程 (三)—zabbix6.0的安装要求
    接上篇,我们继续为大家详细介绍zabbix6.0的使用教程之zabbix6.0的安装部署。接下来我们将从zabbix部署要求到四种不同的安装方式逐一详细的为大家介绍。本篇讲的是部署zabbi......
  • 现代javascript教程 数组
    array字面量或者构造函数声明数组newArray(100),长度100的空获取数组长度,是一个属性,arr.length获得元素,通过索引值,arr[0]修改数组,arr[0]=0用alert方法打印数组,会......
  • k8s集群搭建详细教程【1master2node】
    一、集群分类一主多从:一台master多个多个Node节点多主多从:多个master多个node节点二、安装方式minikube:快速安装搭建单节点k8s工具kubeadm:快速搭建k8s集群的工......
  • Threejs教程-07-光源2
    接上节,讲了Threejs06”。本节具体讲解一些Threejs的知识点。首先有条件的话搞个服务器,这里还是用的三丰云免费云服务器,免费虚拟主机在这里不适用就不介绍了,安装的Centos7......
  • Linux 安装Mysql 详细教程(图文教程)
    首先通过 xshell 或者putty远程进入Linux命令行操作界面。Xshell 的安装1.去 XShell-Download 下载需要的版本。......
  • 【Docker教程系列】Docker学习5-Docker镜像理解
    通过前面几篇文章的学习,我们已经安装好了Docker,也学会使用一些常用的命令。比如启动命令、镜像命令、容器命令。常用命令分类后的第二个就是镜像命令。那么镜像是什么?拉取......
  • 【教程】喜马拉雅如何下载mp3? (教你喜马拉雅下载mp3格式文件音频)
    喜马拉雅用声音连接了全中国数亿人,为内容创作者和用户搭建了共同成长的平台。一方面,创作者用声音分享自己的故事、观点、知识,并因此收获粉丝、成就感或IP增值、商业变现的......