基本图形

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. [洛谷P1392] 取数

    无法用复杂状态进行转移时改变计算方式:巧妙的整体考虑:压缩空间优化时间 传送门:$>here<$ 题意 给出一个n*m矩阵,从每一行选一个数加起来,可以得到一个和.易知总共会有$n^n$个 ...

  2. 「FHQ Treap」学习笔记

    话说天下大事,就像fhq treap —— 分久必合,合久必分 简单讲一讲.非旋treap主要依靠分裂和合并来实现操作.(递归,不维护fa不维护cnt) 合并的前提是两棵树的权值满足一边的最大的比另一 ...

  3. JAVA helloworld！

    idea创建java项目 https://jingyan.baidu.com/article/48b558e3f8f6637f39c09a44.html 本地文档运行 java helloworld ...

  4. python计算斐波那契数列

    斐波那契数列就是黄金分割数列 第一项加第二项等于第三项,以此类推 第二项加第三项等于第四项 代码如下 这一段代码实现fib(n)函数返回第n项,PrintFN(m,n,i)函数实现输出第i项斐波那契数 ...

  5. 《Exception团队》第二次作业：团队项目选题报告

    一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 深入了解软件思想,强化编程技术 二.项目细则 ...

  6. 运行selenium脚本，报seleneium common exception.SessionNotCreatedException:Message:Unable to find a matching set of capabilities错误

  7. jQuery使用（十五）：when()方法的使用

    这个方法再次基于callbacks和deferred对象来实现的一个延迟异步回调来实现的,再when方法内可以添加多个deferred对象作为参数,只有当所有deferred全部被触发了成功的回调函数 ...

  8. DirectX11--实现一个3D魔方(2)

    前言 上一章我们主要讲述了魔方的构造和初始化.纹理的准备工作.目前我还没有打算讲Direct3D 11关于底层绘图的实现,因此接下来这一章的重点是魔方的旋转.因为我们要的是能玩的魔方游戏,而不是一个观 ...

  9. idea使用记录

    1.在工具栏添加工具

  10. jquery 中 this 的范围

    jquery 中的 this button 通常会存在  onclick;// input[type='file'] 会存在 onchange 事件 eg:  onclick = " del ...