寻宋的博客

学习笔记

SVG的入门

<!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
上一篇'ascii' codec can't decode byte 0xe4 in position 0: ordinal not in range(128)
下一篇AJAX跨域请求(JSONP &CORS)
想对作者说点什么? 我来说一句

svg经典入门书籍》完全版

2015年02月03日 12.24MB 下载

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

2008年04月30日 5.63MB 下载

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

2008年04月30日 6.55MB 下载

SVG经典入门

2018年04月25日 12.19MB 下载

最全的SVG教程

2017年12月12日 840KB 下载

没有更多推荐了,返回首页

关闭
关闭