基本图形

rect(矩形)、circle、ellipse(椭圆)、line(直线)、polyline(折线)、polygon(多边形)、path(可以绘制任意图形)

rect

x,y定义矩形坐标，矩形左上角的位置

rx、ry定义矩形的圆角，只给一个值，两者一致

circle

cx、cy定义圆的坐标，圆心的位置

r定义圆的半径

ellipse

line

polyline

polygon

基本属性

fill(填充颜色)、stroke(描边颜色)、stroke-width(描边粗细)、transform

示例

<!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>

</head>

<body>

  <div>

      <svg width="700" height="500" xmlns="http://www.w3.org/2000/svg">

        <rect

            x="10"

            y="10"

            rx="5"

            ry="5"

            width="150"

            height="100"

            stroke="red"

            fill="none">

        </rect>

        <circle

            cx="250"

            cy="60"

            r="50"

            stroke="red"

            fill="none">

        </circle>

        <ellipse

            cx="400"

            cy="60"

            rx="70"

            ry="50"

            stroke="red"

            fill="red">

        </ellipse>

        <line

            x1="10"

            y1="120"

            x2="160"

            y2="220"

            stroke="red">

        </line>

        <polyline

            points="250 120

                    300 220

                    200 220"

            stroke="red"

            fill="none">

        </polyline>

        <polygon

            points="250 120

                    300 220

                    200 220"

            stroke="red"

            stroke-width="5"

            fill="yellow"

            transform="translate(150 0)">

        </polygon>

    </svg>

  </div>

</body>

</html>

SVG初尝试(二)的更多相关文章

  1. SVG初尝试(一)

    SVG简介 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics).其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它 ...

  2. SVG初尝试之path

    命令汇总 命令基本规律 移动和直线命令 弧线命令

  3. R语言爬虫初尝试-基于RVEST包学习

    注意:这文章是2月份写的,拉勾网早改版了,代码已经失效了,大家意思意思就好,主要看代码的使用方法吧.. 最近一直在用且有维护的另一个爬虫是KINDLE 特价书爬虫,blog地址见此: http://w ...

  4. SQLSERVER2012里的扩展事件初尝试（下）

    SQLSERVER2012里的扩展事件初尝试(下) SQLSERVER2012里的扩展事件初尝试(上) 我们继续文章扩展事件在Denali CTP3里的新UI(二)里的这个实验 脚本文件下载:http ...

  5. SQLSERVER2012里的扩展事件初尝试（上）

    SQLSERVER2012里的扩展事件初尝试(上) SQLSERVER2012里的扩展事件初尝试(下) 周未看了这两篇文章: 扩展事件在Denali CTP3里的新UI(一) 扩展事件在Denali ...

  6. PHP下的异步尝试二：初识协程

    PHP下的异步尝试系列 如果你还不太了解PHP下的生成器,你可以根据下面目录翻阅 PHP下的异步尝试一:初识生成器 PHP下的异步尝试二:初识协程 PHP下的异步尝试三:协程的PHP版thunkify ...

  7. 不安分的android开发者（小程序初尝试，前后台都自己做）

    前言 作为一个稍微有点想法的程序员来说,拥有一个自己开发,自己运营,完全属于自己的应用,应该是很多人的梦想.刚毕业那会,自己的工作是做游戏,于是也和朋友业余时间开发一些小游戏玩玩,可是终究不成气候,而 ...

  8. vuejs和webpack项目（VueComponent）初尝试——瀑布流组件

    碎碎念:     好久不见,最近自己有些懈怠没更过多少博,主要原因之一是对自己学习方式的一些思考,翻看之前的博客多是记录学习笔记这反映出了自己对于前端还停留在学习-复习知识点的阶段压根没多少实践经验啊 ...

  9. DICOM医学图像处理：WEB PACS初谈二，图像的传输

    背景: 如前一篇专栏博文所述,借助于CGI或FastCGI技术转发浏览器发送过来的用户请求,启动本地的DCMTK和CxImage库响应.然后将处理结果转换成常规图像返回到浏览器来实现Web PACS. ...

随机推荐

  1. React Native & ES6 & emoji

    React Native & ES6 & emoji && 逻辑运算符 https://developer.mozilla.org/zh-CN/docs/Web/Jav ...

  2. SQL语句中 INNER JOIN的用法！

    一.SQL语句中  INNER JOIN的用法? 1.INNER JOIN的作用? 可以在两个或者更多的表中获取结果,得出一张新表. [隐式内连接] 表一 car  购物车 表二 user 用户 发现 ...

  3. windows环境下mysql密码重置

    1.打开cmd窗口,输入命令[mysqld --skip-grant-tables]回车. 2.再打开一个cmd窗口,输入命令[mysql]回车. 3.输入命令[use mysql; ] 连接权限数据 ...

  4. ionic3创建选项卡

    html页面 <ion-content padding> <ion-segment [(ngModel)]="tabs"> <ion-segment- ...

  5. codevs 2370 小机房的树(LCA)

    过了这么长的时间终于开始看LCA了... 有一次训练题卡在LCA当时不会...拖了好久好久...其实现在还是不会... 只会tarjan... 传送门 板子题咯 tarjan的算法就是基于先序遍历的顺 ...

  6. BZOJ2300[HAOI2011]防线修建——非旋转treap+凸包(平衡树动态维护凸包)

    题目描述 近来A国和B国的矛盾激化,为了预防不测,A国准备修建一条长长的防线,当然修建防线的话,肯定要把需要保护的城市修在防线内部了.可是A国上层现在还犹豫不决,到底该把哪些城市作为保护对象呢?又由于 ...

  7. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  8. 浅谈flex布局中小技巧

    最近有个面试,面试官问到,在一个横向布局上,假设有三个div,每个宽度为定宽apx,如果想使两侧宽度为x,中间div间间隔为2x.x可以自适应.如下图: 怎么做很简单,两行代码就搞定:   justi ...

  9. prometheus 集群

    思路一 统一区域的监控目标,prometheus server两台监控相同的目标群体. 改变后 上面这个变化对于监控目标端,会多出一倍的查询请求,但在一台prometheus server宕机的情况下 ...

  10. 数据结构与算法之美学习笔记：B+树（第48讲）

    一.解决问题的前提是定义清楚问题 通过对一些模糊需求进行假设,来限定要解决问题的范围 根据某个值查找数据,比如 select * from use where id=1234: 根据区间值来查询某些数 ...