实例

<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. switch不能case字符串

    改用if(){ }else if(){ }

  2. 实训41 S7通信 单向连接 基于DP网络通信

    连接的基本概念? 连接是指两个通信伙伴之间执行通信服务建立的逻辑链路,而不是指两个站之间用物理媒体(例如电缆)实现的连接. 连接相当于 通信伙伴之间 一条虚拟的"专线". 一条物理 ...

  3. flutter如何使用配置文件pubspec.yaml（位于项目根目录）来管理第三方依赖包

    官方文档 在软件开发中,很多时候有一些公共的库或SDK可能会被很多项目用到,因此,将这些代码单独抽到一个独立模块,然后哪个项目需要使用时再直接集成这个模块,便可大大提高开发效率.很多编程语言或开发工具 ...

  4. 51nod 1378：夹克老爷的愤怒 很好玩的一道树状dp

    1378 夹克老爷的愤怒 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  取消关注 夹克老爷逢三抽一之后,由于采用了新师爷的策略,乡民们叫苦不堪,开始组织 ...

  5. 2-10 就业课(2.0)-oozie：3、安装2

    第七步:修改oozie-site.xml cd /export/servers/oozie-4.1.0-cdh5.14.0/conf vim oozie-site.xml 如果没有这些属性,直接添加进 ...

  6. Fiddler里面AutoResponder和mock用法

    AutoResponder 1.找到对应图片请求的链接 2.操作步骤如下图: mock 使用场景:上一步骤模块没有完成,但是下一步模块完成了,需要使用到快速模拟,主要使用的地方就是测试接口

  7. python 数据处理 对txt文件进行数据处理

    数据: 对txt文件进行数据处理: txt_file_path = "basic_info.txt" write_txt_file_path = "basic_info1 ...

  8. imput placeholder 移动端不居中问题

    input{ height: 100%; } input::-webkit-input-placeholder { display: flex; align-items: center; line-h ...

  9. 微信小程序—添加背景音乐

    问题:  想在打开小程序时就自动播放背景音乐(循环) 解决方法: 1.思路:写一个函数,在 onLoad()中调用 2. //index.js //获取应用实例 const back = wx.get ...

  10. 让SVG以组件的方式引入吧！

    安装 npm i -D vue-svg-loader or yarn add -D vue-svg-loader webpack 配置 module.exports = { module: { rul ...