基本图形

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. IntelliJ IDEA中Mapper接口通过@Autowired注入报错的正确解决方式

    转载请注明来源:四个空格 » IntelliJ IDEA中Mapper接口通过@Autowired注入报错的正确解决方式: 环境 ideaIU-2018.3.4.win: 错误提示: Could no ...

  2. JPA javax.persistence.TransactionRequiredException

    直接说一下解决方案 Dao层,一定要是Dao层. 1 增加Transactional,必须要事务! 2 增加Modifying,告诉jpa这是修改! @Transactional @Modifying ...

  3. adb bat 执行滑动事件

    chcp 65001 @echo off echo 开始滑动 set str =0 :start adb shell input swipe 100 150 100 100 choice /t 1 / ...

  4. 「POI2011 R2 Day2」Tree Rotations【线段树合并】

    题目链接 [BZOJ] [洛谷] [LOJ] 题解 由于是前序遍历,那么讨论一棵树上的逆序对的情况. 两个节点都在左子树上 两个节点都在右子树上 两个节点分别在不同的子树上. 前两种情况其实也可以归结 ...

  5. Flex布局【弹性布局】学习

    先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...

  6. [NOIP2017] 列队（平衡树）

    考虑转化题意: 设这次操作删掉点\((x, y)\) 对于每一次向左看齐:在第x行删除\((x, y)\),并将y以后的点全部前移一位 对于每一次向前看齐:x以后的点全部上移一位,并在最后一列插入\( ...

  7. jmeter笔记（9）--JDBC Request的使用

    JDBC Request可以向数据库发送一个JDBC(Java Data Base Connectivity)请求(sql语句),获取返回的数据库数据进行操作.它需要和JDBC Connection ...

  8. nginx 提示the "ssl" directive is deprecated, use the "listen ... ssl" directive instead

    该问题是由于新版nginx采用新的方式进行监听https请求了 解决方式 在listen中改为 listen 443 ssl; 删除ssl配置 # ssl on; 完美解决: 解决完成前后的配置如下 ...

  9. nuxt npm run dev 报错Solution to the "Error: listen EADDRINUSE 127.0.0.1:8080"

    Solution to the "Error: listen EADDRINUSE 127.0.0.1:8080" Hello, Just sharing a solution t ...

  10. Node的安装和进程管理

    安装nvm git clone https://github.com/creationix/nvm.git source nvm/nvm.sh 安装node nvm install 6.14.4(版本 ...