SVG绘制不同形状的图形

一般前端开发，绘图这个模块是必须掌握的：

之前遇到一个面试题，如何在页面上面画一个对话框，当时也抓住了主要的点是在对话框中的三角形如何实现

以前没接触SVG时候就直接用border相关属性和transparent的应用（也有涉及相对绝对定位，可自行百度该方法）。

SVG相对来说就更加灵活，不管怎样的图形，在什么位置都是可以通过属性设置来实现的：

下面介绍下基本属性和绘制图形的主要标签：

Svg stroke属性

stroke:定义颜色属性；

Stroke-width:定义了一条线，文本或元素轮廓厚度；

Storke-opacity:定义线条或者元素轮廓等背景的透明度（fill-opacity表示填充颜色透明度）；

【注意】：当fill-opacity、stroke-opacity与opacity属性一起使用时，数值小的生效，结果与位置先后无关

Svg 绘制不同形状的基本图形

<rect> :绘制矩形（x,y分别表示偏移左上位置的大小，rx,ry可以产生圆角类似radius）;

<circle> :绘制圆形（cx,cy表示圆点的位置，r表示圆形半径）;

<ellipse> :绘制椭圆（cx,cy表示圆点的位置，rx,ry分别表示水平半径和垂直半径）;

<line> :绘制直线（x1,y1,x2,y2分别表示始终点的位置）;

<polygon>:绘制多边形，包括三角形（points属性中每个组分别表示多边形各个拐点的坐标）;

<polyline> :绘制折线(和上面的points属性一样)

绘制出的一些效果如下：脑洞大的可自行组合（嘿嘿）

SVG的渐变属性

主要分为线性渐变（linearGradient）和放射渐变（radialGradient）

谨记：上述两个渐变属性标签都是必须嵌套在<defs>的标签内

都需要配合ellipse圆形或椭圆形来配合使用，其中file中的url是指向linearGradient或者radialGradient标签ID的

<ellipse cx="200" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/>

SVG绘制不同形状的图形相关推荐

- Canvas 简介- 使用 Canvas 绘制图形- Canvas 常用方法- SVG 简介- 使用 SVG 绘制基本图形
1 Canvas 简介 Canvas 表示画布,现实生活中的画布是用来作画的. HTML5 中的 Canvas :我们可以称它为"网页中的画布".默认情况下,Canvas 是一块 ...
SVG绘制电路元器件图形与GO.Js绘制元器件电路图形比较
你需要能看的懂SVG中path标签绘制的路径,本篇才对你有意义实际效果如下图: 演示效果 go中用到的绘制规则和svg差不多,只是新增了一些新的方法. 本例中除了二次贝塞尔曲线绘制的正弦波需要研究之 ...
利用svg合成任意形状的图片
什么是svg: 百度百科这样说: SVG可以算是目前最最火热的图像文件格式了,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形.它是基于XML(Extensibl ...
r语言绘制精美pcoa图_如何绘制精美的PCoA图形？
原标题:如何绘制精美的PCoA图形? 今天我们来分享干货--PCoA图形的代码.继PCA.火山图.热图等代码后,基迪奥的程序猿又整理出PCoA代码.具体往期我们分享过的代码贴,可以在文末查看哦. 什么 ...
【HTML5】在canvas上绘制简单的2D图形（+太极图）
canvas(画布) canvas 元素是H5中新增的一个重要元素,专门用来绘制图形.在页面中放置一个canvas元素,就相当于在页面上放置一块画布,可以利用 canvas api 在其中进行图形的描 ...
treeselect 如何选中多个_转pdf后出现word没有的形状——对象选择窗格（同时选择多个形状、图形）...
转pdf后出现word没有的形状--对象选择窗格(同时选择多个形状.图形) word转pdf后,页面边缘突然出现一根线或者其他东西,但是回到word中找,又没有看到,好奇怪!想要了解其中的原因,请往下 ...
了解什么是SVG并使用SVG绘制圆，椭圆，矩形
一.了解SVG概念 SVG英文全称为Scalable Vector Graphics,意思为可缩放的矢量图 HTML5支持内联SVG HTML<svg>元素是图形的容器 SVG有多种绘制路 ...
PPT绘图笔记1：绘制有光泽的图形
如何用PPT绘制有光泽的图形呢? 选择一个形状,右键设置形状格式. 渐变填充,类型选择线性角度为0° 使用颜色渐变光圈选择5个:深浅白浅深(上图颜色序号③②①②③),距离如下图所示,前四个靠的近一 ...
matlab制作有趣动画制作,18个超有趣的SVG绘制动画赏析
本文作者html5tricks,转载请注明出处 SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种 ...
html 如何改变图片形状,用css绘制各种形状
原标题:用css绘制各种形状自适应的椭圆 1.自适应的椭圆实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性 ...

SVG绘制不同形状的图形

SVG绘制不同形状的图形相关推荐

最新文章

热门文章