实例

<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. 无线渗透--wifiphisher之wifi钓鱼获取wifi密码

    本来是想试验一下暴力破解的,但是由于字典太大,跑的时间也比较长,于是使用了钓鱼的方法. 先说一下wifiphisher钓鱼获取wifi密码的原理: wifiphisher对于你在攻击中选定的wifi会 ...

  2. loadrunner-11安装+破解+汉化

    一.loadrunner-11安装下载地址:链接:https://pan.baidu.com/s/10meUz5DfkS8WleLSOalCtQ 提取码:iw0p 由于LR11安装包三个多G,没办法上 ...

  3. 一 Hibernate入门

    Hibernate环境搭建 Hibernate的API Hibernate的CRUD EE三层结构: web层 业务逻辑层 持久层         jdbc,DBUTils,Hibernate Hib ...

  4. 如何看Analysis分析图

    第一步,从分析Summary的事务执行情况入手. Summary主要是判定事务的响应时间与执行情况是否合理.如果发现问题,则需要作进一步分析.通常情况下,如果事务执行情况失败或者响应时间过长等,都需要 ...

  5. iplimage 转HBITMAP

    HBITMAP IplImage2hBitmap(IplImage* pImg) { cvFlip(pImg, NULL); BYTE tmp[]; BITMAPINFO *bmi = (BITMAP ...

  6. postProcessBeanFactory方法源码跟踪

    看这篇文章之前可以先了解之前的跟踪流程,https://www.jianshu.com/p/4934233f0ead 代码过宽,可以shift + 鼠标滚轮 左右滑动查看 AbstractApplic ...

  7. 空中网4k/5k月薪挑选大四实习生的线程题

    空中网4k/5k月薪挑选大四实习生的线程题 两年前,我们一个大四的学员去应聘空中网的实习生职位,空中网只给他出了三道线程题,拿回家做两天后再去给经理讲解,如果前两题做好了给4k月薪,第三道题也做出来的 ...

  8. http error 502.5

    原文地址:https://www.cnblogs.com/loui/p/7826073.html 在部署网站时遇到的各种问题,通过检索找到了解决方案,感谢!!记录一下以免忘记.. 解决方法:把IIS的 ...

  9. Delphi IDFtp用法，包含断点续传

    1  连接远程服务器procedure Connect(AAutoLogin: boolean; const ATimeout: Integer);2  改变目录procedure ChangeDir ...

  10. Hbase排错

    1.执行MR任务报Error: java.lang.RuntimeException: PipeMapRed.waitOutputThreads():?subprocess failed with c ...