SVG的入门

原创 2018年04月15日 21:48:59
<!DOCTYPE html>
<html>
<body>


<h1>My first SVG</h1>
<svg>
<!-- 矩形
fill:颜色填充
stroke-width:边框宽度
stroke:边框颜色
stroke-dasharray:创建虚线
x,y:左、上的距离
opacity:透明度
rx,ry使矩形产生圆角
-->
<rect x="100" y="50" width="300" height="100" style="fill:rgb(0,0,255); 
stroke-width:1; stroke:rgb:(0,0,0)" opacity="0.5"/>
</svg>

<!-- 圆形
cx,cy:圆点的x,y轴,r是半径-->
<svg>
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> 
 
<svg>
<!-- 椭圆
cx,cy:椭圆中心x,y坐标;rx,ry:水平,垂直半径-->
  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

<svg>
<!-- 直线x1,y1:x2,y2开始与结束的坐标 -->
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

<svg>
<!-- 多边形
points:每个角的坐标-->
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

<svg>
<!-- 曲线 -->
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>

<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
注意:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
-->
<path d="M150 0 L75 200 L225 200 Z"/>
</svg>

<svg>
<!-- 文本 -->
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">hello world!!!</text>
</svg>

<!-- <defs>定义滤镜 <filter>id属性定义唯一一个滤镜名字
feGaussianBlur:模糊效果
feOffset:创建阴影效果
linearGradient:渐变
radialGradient:放射性渐变-->
<svg>
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>
</body>
</html>
<!-- SVG文件嵌套入HTML文档的方法:
<embed src="circle.svg" type="image/svg+xml"/>
<object data="circle.svg" typeee="image/svg+xml"></object>不允许使用脚本
<iframe src="circle.svg"></iframe>

-->

用到后再继续深入学习!!!

版权声明:个人学习笔记 https://blog.csdn.net/qq_38698632/article/details/79953836

SVG经典教程2 (SVG从入门到精通)

  • 2008年04月30日 13:36
  • 5.63MB
  • 下载

SVG经典教程1 (SVG从入门到精通)

  • 2008年04月30日 13:32
  • 6.55MB
  • 下载

《svg经典入门书籍》完全版

  • 2015年02月03日 14:51
  • 12.24MB
  • 下载

svg入门(转)

SVG入门(1) 本文假设读者对XML技术已经很熟悉。 ...
  • luocolor
  • luocolor
  • 2007-02-13 23:19:00
  • 1732

svg教程集合

菜鸟教程基础:http://www.runoob.com/svg/svg-tutorial.html path路径中贝塞尔命令详解:http://www.zhangxinxu.com/wordpres...
  • u011500781
  • u011500781
  • 2016-07-16 16:04:26
  • 454

[SVG学习之路]我为什么要学习SVG

首先自我介绍,我是一个快毕业的大专生,6月15日就得交毕业作品了。为什么学SVG呢?    在做网站的过程中遇到了一个问题,图片做为背景的时候,图片会进行拉伸,导致图片失真。于是乎,搜索引擎就起到了重...
  • Teatea_1
  • Teatea_1
  • 2018-03-02 17:41:11
  • 50

SVG Animations 无水印pdf

  • 2017年10月06日 07:21
  • 7.76MB
  • 下载

HTML5之SVG 2D入门5—颜色的表示及定义方式

SVG和canvas中是一样的,都是使用标准的HTML/CSS中的颜色表示方法,这些颜色都可以用于fill和stroke属性,接下来介绍下颜色的表示及定义方式感兴趣的朋友可以了解下,或许对你有所帮助。...
  • mozhi2008
  • mozhi2008
  • 2017-02-01 16:35:41
  • 503

svg经典入门书籍.pdf

  • 2011年08月16日 12:40
  • 6.55MB
  • 下载

Android中使用SVG实现炫酷动画效果

前言SVG,即Scalable Vector Graphics 可伸缩矢量图形。这种图像格式在前端中已经使用的非常广泛,而在移动端的开发中,遇到一些复杂的自定义控件或者动画效果,我们就可以考虑使用SV...
  • SilenceOO
  • SilenceOO
  • 2017-11-27 23:42:06
  • 350
收藏助手
不良信息举报
您举报文章:SVG的入门
举报原因:
原因补充:

(最多只允许输入30个字)