实例

<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. javascript if else优化指南

    不管是平时在学习js中还是在项目书中写js代码,都避免不了一个问题就是有时候要做大量的分支判断,很多人的第一反应就是使用if else.无可厚非,if else早平时做分支判断的时候是非常好用的,但是 ...

  2. hdu 2222 Keywords Search 模板题

    Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others ...

  3. greenplum 存储过程

    参考: https://docs.pivotal.io/search?q=function   官网 https://www.cnblogs.com/greenZ/p/8722081.html htt ...

  4. prepareRefresh方法源码跟踪

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

  5. 赶在EW2020之前，FreeRTOS发布V10.3.0，将推出首个LTS版本

    点击下载:FreeRTOSv10.3.0.exe 说明: 1.新版更新: (1)对于IAR For RISC-V进行支持,并且加强了对RISC-V内核芯片支持,做了多处修正. (2)对阿里平头哥CH2 ...

  6. upper_bound()和low_bound函数的基本使用和理解(转载，已获博主授权)

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sdz20172133/article/details/80101838 前提:一个非降序列!!!!! ...

  7. centos7 程序快捷方式

    /usr/share/Applications 在此文件夹中,全是".desktop"的文件,利用终端打开一个看看就知道了!

  8. 讨论（xia che ≖‿≖✧）magic number——1000000007

    为什么要对1000000007取模(取余) 来看这篇博客的基本上都是和我一样脑子有坑的人,要么就是看了我某篇大数阶乘,大数的排列组合等类似博客被忽悠过来的.我刚刚说到那些类型的题目一般都要求将输出结果 ...

  9. C++面试常见问题——06数组排序

    数组排序 冒泡.最简单的冒泡,没啥好讲的 #include<iostream> using namespace std; void BubbleSort(int a[],int len){ ...

  10. 文本编辑器vim/vi——模式切换及输入模式

    vim一共有三种模式:命令模式.输入模式.末行模式 要从命令模式切换到输入模式:a,i,o a——append 属于在后面追加内容:i——insert 属于插入,在前面插入内容:o——other 属于 ...