<!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. 一道js题（引用类型、基本类型、包装对象、函数赋值）

    var a = 1; var obj = {     b: 2 }; var fn = function () {}; fn.c = 3;   function test(x, y, z) {     ...

  2. eclipse proxy

    -Dorg.eclipse.ecf.provider.filetransfer.excludeContributors=org.eclipse.ecf.provider.filetransfer.ht ...

  3. 浏览器兼容问题 chrome iframe location href

    报了个错 var dt2=new Date(d2Arr[0],d2Arr[1],d2Arr[2]); if(dt1>dt2){//比较日期 alert("开始日期不能晚于结束日期!&q ...

  4. [iOS、Unity、Android] 浅谈闭包的使用方法

    前言 我们经常所编程语言的的进步速度是落后于硬件的发展速度的. 但是最近几年,闭包语法在各个语言中都有自己的体现形式,例如 • C语言中使用函数指针作为回调函数的入口: • Java和C#语言中的La ...

  5. memcache数据组织

    转自:原链接 使用命令 set(key, value) 向 memcached 插入一条数据, memcached 内部是如何组织数据呢 一 把数据组装成 item memcached 接受到客户端的 ...

  6. iOS开发——沙箱

    iphone沙箱模型的有三个文件夹,documents,tmp,Library.有时开发时要求我们保存一些数据在本地,这就用到了. 1.Documents 目录:您应该将所有de应用程序数据文件写入到 ...

  7. ANSI标准

    NSI:美国国家标准学会(AMERICAN NATIONAL STANDARDS INSTITUTE: ANSI)成立于1918年.当时,美国的许多企业和专业技术团体,已开始了标准化工作,但因彼此间没 ...

  8. jstree使用小结(三)

    操作节点的这几个事件都比较简单: 如下 var $tree=$('#tree1'); $tree.jstree({...}); //选中节点 $tree.on('select_node.jstree' ...

  9. 2017 ZSTU寒假排位赛 #2

    题目链接:https://vjudge.net/contest/147632#overview. A题,状态压缩一下然后暴力即可. B题,水题,略过. C题,有负数,前缀和不是单调的,因此不能用尺取法 ...

  10. xml--笔记

    1.例子 <?xml version="1.0" encoding="utf-8"?> <!--引用css样式文件--> <?xm ...