基本图形

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. Session与Cookie(自定义Session)

    一.会话管理 会话管理: 管理浏览器客户端 和 服务器端之间会话过程中产生的会话数据. 域对象: 实现资源之间的数据共享. request域对象 context域对象 会话技术: Cookie技术:会 ...

  2. java核心卷笔记--P48字符串3.6.5

    一定不要使用 == 运算符检测两个字符串是否相等 ! 这个运算符只能够确定两个字串是否放置在同一个位置上 . 当然 , 如果字符串放置在同一个位置上 , 它们必然相等. 但是 ,完全有可能将内容相同的 ...

  3. 范性for语义以及pair和ipair的区别

    详情参考 lua手册 1. 范性for语义 在了解pair和ipair前先简单了解下lua中的for循环,这里只阐述范性for循环的语义,范性 for 在自己内部保存迭代函数,实际上它保存三个值:迭代 ...

  4. 读取导入csv csv报错iterable expected, not float

    示例代码import pandas as pdimport reimport csv data = pd.read_csv('nuojia.csv', encoding='utf-8')# print ...

  5. [数据库] windows server 2003下mysql出现10048错误的解决办法 Can't connect to MySQL server on '127.0.0.1' (10048)（抄）

    网站访问量大了的时候mysql连接数自然就多了,当超出mysql最大连接数的时候就会出现错误,当出现too many字样的错误的时候一般是因为连接数的问题,只需要修改最大连接数max_conectio ...

  6. 洛谷P1072Hankson的趣味题题解

    题目 一道十分经典的数论题,在考场上也可以用暴力的算法来解决,从而得到\(50pts\)的较为可观的分数,而如果想要AC的话,我们观察原题给的数据范围\(a,b,c,d\)(为了好表示,分别代表a1, ...

  7. 【集训队作业2018】【XSY3372】取石子 DP

    题目大意 有 \(n\) 堆石子,初始时第 \(i\) 堆石子有 \(a_i\) 个. 你每次取石子会取 \(k\) 个.在你取完一堆石子之后才能在下一堆中取石子. 游戏会进行 \(t\) 轮,每轮会 ...

  8. Gym - 101982F Rectangles （扫描线+线段树）

    链接:http://codeforces.com/gym/101982/attachments 思路: 问被覆盖次数为奇数次的矩阵的面积并 扫描线求矩阵面积并我们是上界赋为-1,下界赋为1,因为要求覆 ...

  9. 【C++】GSL(GNU Scientific Library) 的安装及在 Visual Studio 2017 中的使用

    GSL 是 GNU 开发并维护的科学计算的库,其中包括: 复数 多项式的根 特殊函数 向量和矩阵 排列 排序 BLAS支持 线性代数 Eigensystems 快速傅立叶变换 正交 随机数 准随机序列 ...

  10. kubernetes 1.14安装部署metrics-server插件

    简单介绍: 如果使用kubernetes的自动扩容功能的话,那首先得有一个插件,然后该插件将收集到的信息(cpu.memory..)与自动扩容的设置的值进行比对,自动调整pod数量.关于该插件,在ku ...