美文网首页
SVG 基础形状

SVG 基础形状

作者: _chuuuing_ | 来源:发表于2017-06-30 18:16 被阅读0次

SVG有一些预定义的形状元素,可被开发者使用和操作:

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>

矩形 <rect>

x:矩形的左侧位置(例如,x="0" 定义矩形到浏览器窗口左侧的距离是 0px)
y:矩形的顶端位置(例如,y="0" 定义矩形到浏览器窗口顶端的距离是 0px)
rx 和 ry:使矩形产生圆角。
width 和 height :定义矩形的高度和宽度
style:CSS 属性
CSS 的 fill:矩形的填充颜色(rgb 值、颜色名或者十六进制值)
CSS 的 stroke-width:矩形边框的宽度
CSS 的 stroke:矩形边框的颜色
CSS 的 fill-opacity:填充颜色透明度(合法的范围是:0 - 1)
CSS 的 stroke-opacity:笔触颜色的透明度(合法的范围是:0 - 1)
CSS opacity:元素的透明值 (范围: 0 到 1)。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="20" width="200" height="130"
  style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1;
  stroke-opacity:0.9"/>
</svg>

圆形 <circle>

cx和cy:圆点的x和y坐标
=> 如果省略cx和cy,圆的中心会被设置为(0, 0)
r:圆的半径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

椭圆 <ellipse>

CX:椭圆中心的x坐标
CY:椭圆中心的y坐标
RX:水平半径
RY:垂直半径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

直线 <line>

x1:在 x 轴定义线条的开始
y1:在 y 轴定义线条的开始
x2:在 x 轴定义线条的结束
y2:在 y 轴定义线条的结束

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

多边形 <polygon>

<polygon> 标签用来创建含有不少于三个边的图形。是由直线组成,其形状是"封闭"的(所有的线条 连接起来)。
points:多边形每个角的 x 和 y 坐标
fill-rule:填充方式,有nonzero和evenodd两种选项

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

曲线 <polyline>

用于创建任何只有直线的形状:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" 
style="fill:white;stroke:red;stroke-width:4" />
</svg>

路径 <path>

用于定义一个路径。
下面的命令可用于路径数据:

  • 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

注意:以上所有命令均大小写敏感。大写表示绝对定位,小写表示相对定位。

d属性定义了路径描述。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

说明:它开始于位置(150,0),到达位置(75,200),然后从那里开始到(225,200),最后在(150,0)关闭路径。

Quadratic Bezier 曲线:

<path id="purple" d="M 100 400 q 200 -300 400 0" fill="none" 
stroke="purple" stroke-width="3" />

说明: q x1 y1 x y:小写的q,相对位置,从当前位置画曲线至相对坐标(x, y),控制点为相对坐标(x1, y1)

文本 <text>

x,y:文本位置
fill:文本颜色
transform:文字旋转 transform="rotate(30 20,40)": rotate(a x,y) 基于点(x,y)进行角度a的旋转

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
  </defs>
  <text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
  </text>
</svg>

注意:该<text>可被包含在<a></a>标签以内

线性渐变 <linearGradient>

放射性渐变 <radialGradient>

重要属性 stroke

  • stroke:颜色
  • stroke-width:宽度
  • stroke-linecap:线条端点形状butt / 无端点, round / 圆形,square / 正方形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="10">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>```
![](https://img.haomeiwen.com/i2662224/a2cae78a0d8d18db.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- stroke-dasharray:用于创建虚线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>```


相关文章

  • SVG 基础形状

    SVG有一些预定义的形状元素,可被开发者使用和操作: 矩形 圆形 椭圆

  • 基础篇 svg 形状

    关于矩形 有个疑问:为什么展示不全呢? style 属性用来定义 CSS 属性CSS 的 fill 属性定义矩形的...

  • svg基础

    随着各大浏览器对svg标准支持的越来越完备,svg在网页及移动端成为了前端工程师们的首选。 svg 基础形状 sv...

  • svg形状

    SVG 有一些预定义的形状元素,可被开发者使用和操作。 SVG 形状 SVG 有一些预定义的形状元素,可被开发者使...

  • SVG

    Menu SVG 实例 SVG 形状 SVG 实例 SVG 的 用来创建一个圆。cx 和 cy ...

  • SVG学习笔记

    SVG学习笔记 简介 SVG使用XML来描述二维图形和绘图程序的语言。 SVG形状 SVG在HTML页面 SVG ...

  • HTML5|SVG形状

    SVG 形状 SVG 有一些预定义的形状元素,可被开发者使用和操作: 矩形 圆形 ...

  • 一篇文章带你了解SVG 蒙版(Mask)

    SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见,以及具有什么透明度。运行效果可以将SV...

  • svg入门详解(实例篇)

    一、SVG形状 SVG有一些预定义的形状元素,可被开发者使用和操作: 矩形 圆形 椭圆...

  • SVG基础/SVG画饼图

    SVG基础 SVG画饼图 扩展

网友评论

      本文标题:SVG 基础形状

      本文链接:https://www.haomeiwen.com/subject/dlaecxtx.html