html-svg基础-1.1

    使用 XML 来描述二维图形和绘图程序的语言

    SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失

 

SVG使用方法:

///外部文件  svg文件内部的结构如下

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <!-- 具体内容 -->
</svg>

引用svg的部分可以是以下几个地方

<embed src="circle1.svg" type="image/svg+xml" />

<object data="circle1.svg" type="image/svg+xml"></object>

<iframe src="circle1.svg"></iframe>

<a href="circle1.svg">View SVG file</a> 

 

///直接引用

    <svg></svg>直接嵌入

相关样式知识

fill:blue;             //填充颜色
fill-opacity:0.1;      //填充透明度

stroke:pink;           //边框颜色
stroke-width:5;        //边框宽度
stroke-opacity:0.9;    //边框

stroke属性

跟css的差不多,设置线、文本或元素轮廓

stroke           颜色

stroke-dasharray 创建虚线 none | 数组(5,5) | inherit

stroke-dashoffset 虚线开始的位置

stroke-width     宽度

stroke-linecap   开放路径的终结 

butt | round | square | inherit

标签

-----------------------------------------------------------------
-----------------------------------------------------------------

1、矩形<rect>

2、圆形<circle>

3、椭圆<ellipse>

4、直线<line>

5、多边形<polygon>

6、折线<polyline>

7、路径<path>

8、文本<text>

9、<defs>

10、<filter>

11、线性渐变<linearGradient>

12、放射性渐变<radialGradient>

-----------------------------------------------------------------
-----------------------------------------------------------------

 

1、矩形<rect>

<!--  x y: 左上角坐标
    rx ry: 使矩形产生圆角   -->
<!--     stroke:边框的颜色 
   fill-opacity:填充颜色透明度 
 stroke-opacity:笔触颜色透明度  -->

<rect x="50" y="20" width="150" height="150" rx="20" ry="20"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
  stroke-opacity:0.9"/>

2、圆形<circle>

 

<!--  r:半径
  cx cy:圆心坐标  -->

<circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>

3、椭圆<ellipse>

 

<!-- cx cy:椭圆中心坐标
     rx ry:半径  -->

<ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>

4、直线<line>

<!-- x1 y1:起始点坐标
     x2 y2:终点坐标  -->
<line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>

5、多边形<polygon>

 

<!-- 可以形成五角星  -->
<!-- fill-rule:指定算法,判断某区域是否属于"内部" nonzero | evenodd | inherit  -->
<polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />

6、折线<polyline>

 

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>

7、路径<path>

  • M = moveto 移动到 (坐标)
  • L = lineto 画线到 坐标
  • H = horizontal lineto 水平线到 (距离
  • V = vertical lineto   垂直线到 距离
  • C = curveto  三次贝塞尔曲线到 坐标 p1 p2 p3
  • S = smooth curveto 光滑三次贝塞尔曲线到 坐标 p2 p3
    【当一个点某一侧的控制点是它另一侧的控制点的对称(以保持斜率不变),可以使用S命令。简写的贝塞尔曲线命令】
  • Q = quadratic Belzier curve 二次贝塞尔曲线到 坐标 p1 p2
  • T = smooth quadratic Belzier curveto 光滑二次贝塞尔曲线到 坐标 p2
  • A = elliptical Arc 椭圆弧 
    (rx,ry  xRotation  isLarge,sweep endX,endY
    rx:水平方向上的半径;ry:垂直方向上的半径。
      xRotation:设置弧线X轴方向上的旋转,通常不需要,默认值0。
     isLarge   :从A点到B点绘制一条弧线,可以得到一大一小的弧线。0 1。isLarge==1?大:小
     sweep     :0 1。sweep==1?顺时针:逆时针绘制弧线】
  • Z = closepath 关闭路径 

注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

<path d="M250 150 L150 350 L350 350 Z" />

8、文本<text>

 

<!-- 如果需要路径,则加defs,否则直接<text>aa</text>即可 -->
<defs>
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<!-- x y:坐标-->
<text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>
<!-- 每个<tspan> 元素可以包含不同的格式和位置 -->
<text x="10" y="20" style="fill:red;">Several lines:
    <!-- 注:xy为绝对位置 -->
    <tspan x="10" y="45">First line</tspan>
    <tspan x="10" y="70">Second line</tspan>
</text>

9、<defs>

    SVG滤镜定义在<defs>元素中。

10、<filter>

用来定义SVG滤镜。使用必需的id来定义向图形应用哪个滤镜

<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)" />

11、线性渐变<linearGradient>

12、放射性渐变<radialGradient>

 

 

参考: https://segmentfault.com/a/1190000005053782 svg之<path>详解

    http://www.runoob.com/svg/svg-tutorial.html svg教程 

    http://www.w3school.com.cn/svg/index.asp    svg教程

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值