svg形状相关的学习(二)

Easter79
• 阅读 578

阅读目录

  • 一：线段

  • 二：笔画特性

    1. stroke-width

    2. stroke-opacity

    3. stroke-dasharray 属性

  • 三：常见的形状

    1. 矩形

    2. 圆角矩形

    3. 圆和椭圆

    4. 多边形

    5. 折线

回到顶部

一：线段

在上一篇文章中，我们已经了解了坐标系统，现在我们在该坐标系统中开始绘图了。

在svg中可使用元素画出一条直线段。标签是用来创建线条的。如下代码所示：

<line x1="start-x" y1="start-y" x2="end-x" y2="end-y"></line>

x1：该属性在x轴定义线条的开始的位置。
y1: 该属性在y轴定义线条的开始的位置。
x2: 该属性在x轴定义线条的结束的位置。
y2: 该属性在y轴定义线条的结束的位置。

如下代码所示：

<svg 
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <!-- 水平线条 -->
  <line x1="40" y1="20" x2="100" y2="20" style="stroke: red;"></line>
  <!-- 垂直线条 -->
  <line x1="40" y1="50" x2="40" y2="150" style="stroke: black;"></line>
</svg>

效果如下所示：

svg形状相关的学习(二)

回到顶部

二：笔画特性

回到顶部

1. stroke-width

 线段可以看作在画布上画出来的笔画，但是笔画从尺寸，颜色和风格都会影响线段的表现，那么这些特性我们都可以在style属性中指定。

如上我们通过线段可以绘出一条线，但是线也有粗和细之分，想要粗和细可以使用 stroke-width 这个属性。我们现在将上面的列子的宽度设置为10，就可以看到线段会更粗更明显了，如下代码：

<svg 
  style="border: 1px solid red;" 
  width="400" 
  height="200" 
  viewBox="0,0,400,200"
>
  <!-- 水平线条 -->
  <line x1="40" y1="20" x2="100" y2="20" style="stroke-width: 10; stroke: red;"></line>
  <!-- 垂直线条 -->
  <line x1="40" y1="50" x2="40" y2="150" style="stroke-width: 10; stroke: black;"></line>
</svg>

效果如下所示：

svg形状相关的学习(二)

回到顶部

2. stroke-opacity

如上我们所有的线条都是实线，但是如果我们想要透明的线，不会挡住下面的东西，我们可以使用该属性，该属性的取值范围是：0.0~1.0 其中0代表完成透明，1代表完全不透明。小于0的值会被更改为0，大于1的值会被更改为1. 如下代码演示：

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <line x1="30" y1="0" x2="30" y2="60" style="stroke: red; stroke-width: 5;"></line>
  <line x1="10" y1="10" x2="50" y2="10" style="stroke: black; stroke-width: 5;stroke-opacity:0.2;"></line>
  <line x1="10" y1="20" x2="50" y2="20" style="stroke: black; stroke-width: 5;stroke-opacity:0.4;"></line>
  <line x1="10" y1="30" x2="50" y2="30" style="stroke: black; stroke-width: 5;stroke-opacity:0.6;"></line>
  <line x1="10" y1="40" x2="50" y2="40" style="stroke: black; stroke-width: 5;stroke-opacity:0.8;"></line>
  <line x1="10" y1="50" x2="50" y2="50" style="stroke: black; stroke-width: 5;stroke-opacity:1;"></line>
</svg>

如下图效果所示：

svg形状相关的学习(二)

回到顶部

3. stroke-dasharray 属性

如果我们需要绘制虚线边框的话，我们可以使用 stroke-dasharray 属性。它的值由一列数字构成，代表线的长度和空隙的长度，数字之间用逗号或空格分割。数字的个数为偶数，但是如果我们指定的数字个数为奇数的话，则SVG会重复绘一次，使得总个数为偶数。

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <!-- 9个像素的虚线, 5个像素的空隙 -->
  <line x1="10" y1="10" x2="100" y2="10" style="stroke-dasharray: 9, 5; stroke: black; stroke-width:2;"></line>
  <!-- 9个像素的虚线, 5个像素的空隙, 5个像素的虚线 -->
  <line x1="10" y1="20" x2="100" y2="20" style="stroke-dasharray: 9, 5, 5; stroke: black; stroke-width:2;"></line>
</svg>

效果如下所示：

svg形状相关的学习(二)

注意：9个像素的虚线，是指该线条的长度为9，5个像素的空隙，是指该空隙的长度为5. 而不是说在一根线条上有9个虚线和5个空隙。至于有多少个，计算机会自己根据线条的长度计算出来的。

回到顶部

常见的形状

回到顶部

1. 矩形

矩形我们之前使用过的，它是使用 这个标签来指定的，它有 x(左上角) 和 y(左上角)坐标，以及它的宽度(width) 和 高度(height)即可。矩形内部我们可以使用fill属性代表颜色进行填充。如果没有指定fill颜色，则默认会使用黑色填充。

我们也可以指定 fill: none; 即不填充矩形内部，保持透明。至于矩形边框，我们可以使用 stroke来指定，如果我们不指定stroke的话，则它的值为none。将不会绘制矩形边框。

如下代码所示：

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <!-- 矩形内部填充为黑色，不绘制边框 -->
  <rect x="10" y="10" width="30" height="50"></rect>
  <!-- 内部不填充颜色，绘制黑色边框-->
  <rect x="50" y="10" width="20" height="40" style="fill:none;stroke: black;"></rect>
  <!-- 内部填充为蓝色，半透明红色边框 -->
  <rect x="10" y="70" width="25" height="30" style="fill: blue;stroke:red;stroke-width:7;stroke-opacity:0.5;"></rect>
  <!-- 内部填充为半透明的黄色，用虚线绘制绿色边框 -->
  <rect x="50" y="70" width="35" height="30" style="fill: yellow;stroke:green;stroke-width:2;stroke-opacity:0.5;stroke-dasharray: 5, 2"></rect>
</svg>

效果如下所示：

svg形状相关的学习(二)

回到顶部

2. 圆角矩形

如果我们想要得到一个圆角矩形的话，我们可以分别指定x方向和y方向的圆角半径，即 rx 和 ry. 如果我们只指定了rx和ry中的一个值，则默认认为他们是相等的。如果我们的矩形的宽度和高度相同的话，我们想画个圆，我们可以设置 rx 和 ry 的大小是该宽度的一半即可，就和我们之前css中的 border-radius 类似的。比如如下代码：

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <!-- 圆角半径 rx 和 ry 为2-->
  <rect x="10" y="10" width="20" height="40" rx="2" ry="2" style="fill:none;stroke: black;"></rect>
  <!-- 圆角半径 rx 为2，ry默认也会设置为2-->
  <rect x="50" y="10" width="20" height="40" rx="2" ry="2" style="fill:none;stroke: black;"></rect>
  <rect x="90" y="10" width="40" height="40" rx="25" ry="25" style="fill:none;stroke: black;"></rect>
</svg>

效果如下所示：

svg形状相关的学习(二)

回到顶部

3. 圆和椭圆

要画一个圆，我们也可以使用 元素，需要指定圆心的x和y坐标(cx/cy)以及半径(r). 椭圆除了需要指定圆心的坐标外，还需要同时指定x方向的半径和y方向的半径，属性分别为 rx 和 ry.

对圆或椭圆来说，如果省略了cx或cy, 则默认为0，如果半径为0，则不会显示图形。如果半径为负数，则会报错，如下代码：

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <!-- 画一个圆，圆心相对x坐标和y坐标距离为50，半径为20画圆 -->
  <circle cx="50" cy="50" r="20" style="stroke:black;fill:none;"></circle>
</svg>

效果如下所示：

svg形状相关的学习(二)

再来看看椭圆，椭圆需要使用 元素来指定，如下代码所示：

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <!-- 画一个椭圆，圆心相对x坐标和y坐标距离为40，椭圆相对于x轴半径为10，相对于y轴半径为20 画椭圆 -->
  <ellipse cx="40" cy="40" rx="10" ry="20" style="stroke: black;fill:none;"></ellipse>
</svg>

效果如下所示：

svg形状相关的学习(二)

如上，如果我们把该x轴的半径和y轴的半径一样的话，那么也就会变成圆了，如下代码所示：

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <!-- 画一个椭圆，圆心相对x坐标和y坐标距离为40，椭圆相对于x轴半径为10，相对于y轴半径为20 画椭圆 -->
  <ellipse cx="60" cy="40" rx="20" ry="20" style="stroke: black;fill:none;"></ellipse>
</svg>

效果如下所示：

svg形状相关的学习(二)

回到顶部

4. 多边形

除了上面矩形，圆和椭圆外，如果我们还想画五角星，六边形，或八边形，或其他的封闭图形的话，我们可以使用 元素可以用来画任意的封闭图形。该元素使用了points属性指定了每个端点的坐标，横坐标与纵坐标之间用逗号分隔，点与点之间用空格分隔。如下代码

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <!-- 平行四边形 -->
  <polygon points="15,10 55,10 45,20 5,20" style="fill:red; stroke: black;"></polygon>
  <!-- 五角星 -->
  <polygon points="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5 42.3,60.1 35,55 27.7, 60.1 30.3,51.5 23.1,46.1 32.1,46.1" style="fill: #cfc; stroke: green;"></polygon>
  <!-- 不规则图形 -->
  <polygon points="60 60, 65 72, 80 60, 90 90, 72 80, 72 85, 50 95" style="fill:yellow;fill-opacity:0.5;stroke: black; stroke-width:2;"></polygon>
</svg>

效果如下所示：

svg形状相关的学习(二)

我们来简单的分析一下，上面的代码，比如说 平行四边形，points="15,10 55,10 45,20 5,20" 首先x轴的横坐标是15，然后纵坐标是10，因此第一个是左上角的点，然后 55, 10, x轴的横坐标是55，y轴的纵坐标是10，因此是右上角的那个点坐标。
然后就是右下角那边坐标点了，是45,20，离x轴距离45， 离y轴的距离是20， 最后就是 5, 20了，是左下角那个坐标点了。

理解填充边线交叉的多边形

我们之前使用fill对其他多边形填充颜色很简单，因为其他的多边形的各个边都没有交叉，很容易区分出多边形的内部区域和外部区域。
但是，当多边形的边彼此交叉的时候，要区分哪些区域是图形的内部是不容易区分的，比如我们的上面五角星，在SVG中有两种判断某个点是否是在多边形中的规则，有 fill-rule 这个属性，该属性有2种值分别为：nonzero（默认值）和 evenodd 。 如下演示：

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <!-- 五角星 -->
  <polygon points="48,16 16,96 96,48 0,48 80,96" style="fill: #cfc; stroke: green;fill-rule: nonzero"></polygon>
  <polygon points="148,16 116,96 196,48 100,48 180,96" style="fill: #cfc; stroke: green;fill-rule: evenodd;"></polygon>
</svg>

效果如下：

svg形状相关的学习(二)

回到顶部

5. 折线

有时候我们需要做折线这种效果，我们可以使用 元素来做会更简单的，它与元素有相同的points属性。
但是不同的地方是它的图形并不封闭，如下代码演示：

<svg 
  style="border: 1px solid red;" 
  width="200" 
  height="200" 
  viewBox="0,0,200,200"
>
  <polyline points="5 20, 20 20, 25 10, 35 30, 45 10, 55 30, 65 10, 75 30, 80 20, 95 20" style="stroke: black;stroke-width:3;fill:none;"></polyline>
</svg>

效果如下所示：

svg形状相关的学习(二)

svgborderrect椭圆前端前端
点赞
收藏
评论区
推荐文章
blmius blmius
•
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s
3598
0
0
Easter79 Easter79
•
2年前
swap空间的增减方法
（1）增大swap空间去激活swap交换区：swapoff v /dev/vg00/lvswap扩展交换lv：lvextend L 10G /dev/vg00/lvswap重新生成swap交换区：mkswap /dev/vg00/lvswap激活新生成的交换区：swapon v /dev/vg00/lvswap
1041
0
0
Jacquelyn38 Jacquelyn38
•
3年前
2020年前端实用代码段，为你的工作保驾护航
有空的时候，自己总结了几个代码段，在开发中也经常使用，谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
2068
0
0
Stella981 Stella981
•
2年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
960
0
0
Wesley13 Wesley13
•
2年前
Java获得今日零时零分零秒的时间（Date型）
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
991
0
0
Wesley13 Wesley13
•
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败，请联系管理员！');中国在东8区所以加8方法二：selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
987
0
0
Wesley13 Wesley13
•
2年前
00：Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork)，斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟，已经成为Web应用程序的首选开发语言。Java是简单易学，完全面向对象，安全可靠，与平台无关的编程语言。
967
0
0
Wesley13 Wesley13
•
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
1189
0
0
Python进阶者 Python进阶者
•
5个月前
Excel中这日期老是出来00：00：00，怎么用Pandas把这个去除
大家好，我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下：这日期老是出来00：00：00，怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下：pd.toexcel之前把这
197
0
0
Easter79
Easter79
Lv1
今生可爱与温柔，每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k
热门文章
uni app video、视频播放开发
tmux的复制粘贴
tableau地图源之高德地图
storybook配置之基本配置和webpack配置
twint 安装及使用