<!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. Delphi的指针(转)

    源:http://blog.csdn.net/henreash/article/details/7368088 Pointers are like jumps, leading wildly from ...

  2. Java运行内存结构分析

  3. Java——异常谜题

    1.谜题36  try和finally语句,代码如下,判断输出 public class Indecisive { public static void main(String[] args) { S ...

  4. cookie讲解-------浏览器种cookie

    1  responce添加Set-Cookie参数: http request的返回responce为: [('Content-Type', 'application/x-javascript'), ...

  5. 《accelerated c++》---------第六章

    本章主要讲了算法部分.就是<algoruthm>里面的算法.

  6. myeclipse设置以及快捷键

    http://blog.csdn.net/anxin323/article/details/40214467 如何查看jar包里的源码和doc文档? 1. jar文件右键properties--jav ...

  7. angularJS 系列（三）- 自定义 Service

    参考:http://viralpatel.net/blogs/angularjs-service-factory-tutorial/ https://www.pluralsight.com/blog/ ...

  8. c# 封装的文件夹操作类之复制文件夹

    c#  封装的文件夹操作类之复制文件夹 一.复制文件夹原理: 1.递归遍历文件夹 2.复制文件 二.FolderHelper.cs /// <summary> /// 文件夹操作类 /// ...

  9. iOS AFN向接口端传递JSON数据

    NSDictionary *body = @{@"snippet": @{@"topLevelComment":@{@"snippet":@ ...

  10. sqlserver数据库类型对应Java中的数据类型

    SQL Server 类型 JDBC 类型 (java.sql.Types) Java 语言类型 bigint BIGINT long timestamp binary BINARY byte[] b ...