<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>svg 6 elements</title>

</head>

<body>

    <h1>Hello SVG 6 Elements</h1>

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

    <rect x="20" y="20" width="50" height="30" rx="5" ry='10'></rect>

    <circle cx="100" cy="20" r="10"></circle>

    <ellipse cx="150" cy="20" rx="10" ry="5"></ellipse>

    <line x1="100" y1="100" x2="110" y2="90" style='stroke:rgb(99,99,99);stroke-width:2'></line>

    <polygon points="100,100 150,150 139,123" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

    <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>

</svg>

</body>

</html>

basic. svg

<svg 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="none"></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>

SVG六基本元素的更多相关文章

  1. d3可视化实战01：理解SVG元素特性

    一. SVG简介 ————————————————————————————————————————————————————————————————— SVG是一种和图像分辨率无关的矢量图形格式,它使用 ...

  2. SVG基本图形

    SVG 是使用 XML 来描述二维图形和绘图程序的语言 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML ...

  3. 【D3】D3学习轨迹-----学习到一定层度了再更新

    1.  首先了解SVG的基本元素 http://www.w3school.com.cn/svg/ 2.  了解d3的专有名词  http://www.cnblogs.com/huxiaoyun90/p ...

  4. HTML--SVG基础

    一 SVG概述 SVG是Scalable Vector Graphics的缩写,即缩放式矢量图形; 优点: 1.使用编辑器即可编辑图形; 2.基于XML,SVG图形可以被很容易的搜索,脚本化和压缩; ...

  5. Python 和 C/C++ 拓展程序如何性能优化？看这一篇文就够

    作者:王璐璐 | 旷视 MegEngine 架构师 一. 背景 在 MegEngine imperative runtime 的早期开发中,我们面临着一些的性能优化问题.除了一些已知需要重构的地方(早 ...

  6. SVG 学习<六> SVG的transform

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. o'Reill的SVG精髓（第二版）学习笔记——第六章

    第六章:坐标系统变换 想要旋转.缩放或者移动图片到新的位置.可以给对应的SVG元素添加transform属性. 6.1 translate变换 可以为<use>元素使用x和y属性,以在特性 ...

  8. svg学习（六）line

    <line> 标签用来创建线条. <?xml version="1.0" standalone="no"?> <!DOCTYPE ...

  9. HTML5学习(六)---------SVG 与Canvas

    参考教程:http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不 ...

随机推荐

  1. Transport layer and Network layer

    http://stackoverflow.com/questions/13333794/networking-difference-between-transport-layer-and-networ ...

  2. phpstorm 正则匹配删除注释行（替换注释行为空行）

    使用phpstorm 来编写php 和javascript 代码,感觉还是不错的,用得也很舒服. 遇到了一个需求,有时候在阅读框架源代码的时候 , 想过滤(删除)掉源代码中的注释行,如果手动逐行删除显 ...

  3. Mysql集群读写分离（Amoeba）

    Amoeba原理戳这里:Amoeba详细介绍 实验环境 Master.Amoeba--IP:192.168.1.5 Slave---IP:192.168.1.10 安装JDK JDK下载地址:http ...

  4. Ajax 下拉加载数据

    $(document).scroll(function() { var pageHeight = $(document).height()-$(window).height(); var bodySc ...

  5. C程序编译执行过程

    C程序编译执行过程   认识C编译执行过程,是C学习的开端. 简单说C语言从编码编译到执行要经历一下过程:   C源代码 编译---->形成目标代码,目标代码是在目标机器上运行的代码. 连接-- ...

  6. (中等) POJ 2482 Stars in Your Window，静态二叉树。

    Description Here comes the problem: Assume the sky is a flat plane. All the stars lie on it with a l ...

  7. 比较全的JavaScript倒计时脚本

    JavaScript倒计时在Web中用得非常广泛,比如常见的团购啊.还有什么值得期待的事情,都可以用到倒计时.现在举了四个例子,比如时间长的倒计时,小时倒计时,最简的倒计时,还有秒表等等,应该可以满足 ...

  8. LPC2478内存布局以及启动方式

    LPC2478 是NXP公司推出的一款基于APR7TDMI-S的工控型MCU,内置RAM与flash,同时提供外部扩展flash和ram接口,拥有LCD控制器,其内存布局如下所示 其中Flash高达5 ...

  9. 10天学会phpWeChat——第九天：数据库增、删、改、查(CRUD)操作

    数据库的操作(CRUD)是一个现代化计算机软件的核心,尤其针对web应用软件.虽然在前面的几讲里,我们针对数据库操作大致有了一些了解,但今天我们需要再次强化下. 除了新瓶装老酒,我们今天还引入一个新的 ...

  10. 查看错误日志发现有两个警告（ignored in --skip-name-resolve mode）

    2016-08-02 17:30:26 17374 [Warning] 'user' entry '@losnau-223.com' ignored in --skip-name-resolve mo ...