基本图形

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. let 和 const 在for 循环中的使用

    在ES6 的规范中,多了两个声明变量的关键字: let 和const.初次学习的时候,只记住了 let 声明的变量只在for 的循环体中有效,循环结束后 变量就消失了, 同时const 也可以在for ...

  2. novaclient的api调用流程与开发

    novaclient的api调用流程与开发 2015年07月05日 19:27:17 qiushanjushi 阅读数:3915   http://blog.csdn.net/tpiperatgod/ ...

  3. JS前端无侵入实现防止重复提交请求技术

    JS前端无侵入实现防止重复提交请求技术 最近在代码发布测试的过程中,我发现有些请求非常的消耗服务器资源,而系统测试人员因为响应太慢而不停的点击请求.我是很看不惯系统存在不顺眼的问题,做事喜欢精益求精, ...

  4. [debian]use ISO as debian apt source / 使用ISO文件作为apt源

    准备文件: debian-9.8.0-amd64-DVD-1.iso debian-9.8.0-amd64-DVD-2.iso debian-9.8.0-amd64-DVD-3.iso 挂载: roo ...

  5. [powershell]获取FCID&Port

    Get-InitiatorID Get-InitiatorPort

  6. jsp:forward动作功能

    jsp:forward动作:引导请求者进入新的页面 例子:login.jsp <center><p>用户登录 </p> <form name="fo ...

  7. jsp:include动作功能

    jsp:plugin动作:连接客户端的Applet或Bean插件 jsp:useBean动作:应用javaBean组件 jsp:setProperty动作:设置javaBean属性 jsp:getPr ...

  8. python验证卡普耶卡(D.R.Kaprekar)6174猜想

    1955年,卡普耶卡(D.R.Kaprekar)对4位数字进行了研究,发现一个规律: 对任意各位数字不相同的4位数,使用各位数字能组成的最大数减去能组成的最小数,对得到的差重复这个操作,最终会得到61 ...

  9. Oracle启动操作

    转自:https://www.cnblogs.com/mellowsmile/p/4610942.html 1.启动oracle数据库: 从root切换到oracle用户进入:su - oracle ...

  10. WebGL教程

    https://www.w3cschool.cn/webgl/rleo1oh7.html