实例

<html>

<body>

<h1>My first SVG</h1>

<svg style="border: 1px solid; margin-left: 20px;">

	<circle r="20" stroke-width="2" fill="red" cx="100" cy="50" />

</svg>

</body>

</html>

  • (cx, cy)：圆心坐标

  • stroke和stroke-width：控制如何绘制轮廓

在HTML中，embed,object

使用embed标签

<embed src="circle1.svg" type="image/svg+xml" />

使用object标签

<object data="circle1.svg" type="image/svg+xml"></object>

使用iframe标签

<iframe src="circle1.svg"></iframe>

直接嵌入svg标签

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />

</svg>

矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

	<rect width="300" height="100"

		  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;"/>

</svg>

style/属性

  • fill 填充颜色

  • strok-width 轮廓宽度

  • stroke 轮廓颜色

  • fill-opacity： 填充颜色的不透明度

  • stroke-opacity：轮廓颜色不透明度

  • opacity：整个元素的不透明度

  • width

  • height

  • rx,ry ：产生圆角

  • x，y：坐标原点，偏移

圆形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  <circle cx="100" cy="50" r="40" stroke="black"

  stroke-width="2" fill="red"/>

</svg>

style/属性

  • cx,cy：圆心
  • r：半径

椭圆

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px">

  <ellipse cx="300" cy="80" rx="100" ry="50"

  style="fill:yellow;stroke:purple;stroke-width:2"/>

</svg>

style/属性

  • cx,cy：椭圆圆心
  • rx,ry：半径

直线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

	<line x1="0" y1="0" x2="200" y2="200"

		  style="stroke:rgb(255,0,0);stroke-width:2"/>

</svg>

多边形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

	<polygon points="200,10 250,190 160,210"

			 style="fill:lime;stroke:purple;stroke-width:1"/>

</svg>



<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

	<polygon points="100,10 40,180 190,60 10,60 160,180"

			 style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />

</svg>

  • fill-rule:nonzero：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 200px">

	<polygon points="100,10 40,180 190,60 10,60 160,180"

			 style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

</svg>

折线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200px">

	<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"

			  style="fill:none;stroke:black;stroke-width:3" />

</svg>

路径- path

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

    <path d="M150 0 L75 200 L225 200 Z" />

</svg>

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve 方贝塞尔曲线
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

svg教程的更多相关文章

  1. [翻译svg教程]svg学习系列 开篇

    目录 [翻译svg教程]svg学习系列 开篇 [翻译svg教程 ]svg 的坐标系统 [翻译svg教程]svg 中的g元素 [翻译svg教程]svg中矩形元素 rect [翻译svg教程]svg中的c ...

  2. SVG 教程

    SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 现在开始学习 SVG! <html> <body> &l ...

  3. [翻译svg教程]Path元素 svg中最神奇的元素！

    先看一个实例 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999 ...

  4. [翻译svg教程]svg中的circle元素

    svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...

  5. [翻译svg教程]svg中矩形元素 rect

    svg 元素<rect> 是一个矩形元素,用这个元素,可以你可以绘制矩形,设置矩形宽高,边框的宽度颜色,矩形的填充颜色,是否用圆角等 rect 示例 <svg xmlns=" ...

  6. [翻译svg教程]svg 中的g元素

    svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...

  7. 【翻译svg教程 】svg 的坐标系统

    http://tutorials.jenkov.com/svg/svg-coordinate-system.html svg的坐标系统(和大多数计算机绘图的坐标系统)和数学中绘图系统有点不一样 数学/ ...

  8. 非常不错的svg教程

    介绍的非常详细,也很有调理,内容很详细 适合于初学者学习 http://www.softwhy.com/qiduan/SVG_source/

  9. SVG坐标系统

    SVG的画布.画布视区(viewBox).浏览器视窗的概念 画布 画布是绘制SVG内容的一块区域,理论上在所有维度上都是无限的.(也有人称为"SVG世界",但我觉得叫画布比较合适) ...

随机推荐

  1. 渗透测试神器Burp Suite v1.7.11发布（含下载）

    BurpSuite是一款信息安全从业人员必备的集成型的渗透测试工具,它采用自动测试和半自动测试的方式,包含了Proxy,Spider,Scanner,Intruder,Repeater,Sequenc ...

  2. 学习angularJs(1)--引用文件

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js">< ...

  3. CSS-font

    font:[ [ <' font-style '> || <' font-variant '> || <' font-weight '> ]? <' font ...

  4. 获取网卡MAC、硬盘序列号、CPU_ID、BIOS编号

    抄来的 获取网卡MAC.硬盘序列号.CPU ID.BIOS编号 本文中所有原理及思想均取自网络,有修改.其中获取硬盘序列号.获取CPU编号.获取BIOS编号的原始代码的著作权归各自作者所有. 以下代码 ...

  5. 061、Java中利用return结束方法调用

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  6. 011、Java中将范围大的数据类型变为范围小的数据类型

    01.代码如下 package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  7. ZOJ 3802 Easy 2048 Again 状态DP

    zoj 上次的月赛题,相当牛的题目啊,根本想不到是状态压缩好吧 有个预先要知道的,即500个16相加那也是不会超过8192,即,合并最多合并到4096,只有2的12次方 所以用状态压缩表示前面有的序列 ...

  8. java 图片上传

    代码是最有力量的,嘎嘎 @CrossOrigin@ApiOperation(value = "上传图片", notes = "上传图片", httpMethod ...

  9. 一、Vue环境搭建及基础用法

    一.项目初始化及安装 官网:https://cn.vuejs.org/ 1.1安装及运行项目步骤 1.安装vue-cli(-g=-global) npm install -g vue-cli cnpm ...

  10. c# quartz

    quartz调度核心元素: Scheduler:任务调度器,是实际执行任务调度的控制器.在spring中通过SchedulerFactoryBean封装起来. Trigger:触发器,用于定义任务调度 ...