svg 日常操作

创建svg 文件

1 <svg>
2   xmlns='http://www.w3.org/2000/svg'  #标头 必须
　　# SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显
　  # viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度 此处的值与 path 路径的值相关连
3   viewBox='0 0 64 64'    
　　 version="1.1"  #版本号
4   width='64' height='64'　　#svg 大小尺寸 如果想图像形状不变，只改变大小 修改 width height
5   fill='currentcolor'>　　　#填充颜色
6   <path d='M8 26 L32 50 L56 26 L34 6 L32 4 Z' /> #path 路径 这个地方可以放 svg 的子标签
7 </svg>

  详解viewBox   SVG Viewport、View Box和preserveAspectRatio

形状

　  标签内的值可以是百分比，也可以直接是数值

  • 矩形 <rect>
    •  必选： width height  # 宽高
    •  可选： x  y  stroke style fill  rx ry
      • x ,y 画布的起始 x y 位置 （例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
      • rect 元素的 width 和 height 属性可定义矩形的高度和宽度
      • style 属性用来定义 CSS 属性
      • CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
      • CSS 的 stroke 属性定义矩形边框的
      • rx ,ry 图像圆角
  • 圆形 <circle>
    • 必选：r  #属性定义圆的半径
    • 可选：cx  cy
      • cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
  • 椭圆 <ellipse>
    • 必选：rx  ry #椭圆中心的x y 坐标
    • 可选：cx cy
      • CX属性定义的椭圆中心的x坐标； 如果省略cx和cy，圆的中心会被设置为(0, 0)
      • CY属性定义的椭圆中心的y坐标
  • 线 <line>
    • 必选：x2 y2
      • 可选：x1 y1  ( 默认 起始位置  x1=0 y1=0)
      • x1 属性在 x 轴定义线条的开始
      • y1 属性在 y 轴定义线条的开始
      • x2 属性在 x 轴定义线条的结束
      • y2 属性在 y 轴定义线条的结束
  • 多边形 <polygon>
    • 必选：polygon  至少 2组点
      •  points 点的坐标 每两个算是一组 组与组之间可以使用逗号做间隔
      • 折现的交换点在线段末尾的中心点(将绘制的线段放大可以观察到)并且在闭合路径(将结束点设置为起始点 )的时候会出现问题
      • 多边形具有自动闭合的左右,可以实现完美闭合并且不用将结束点设置为起始点
      • SVG的图形填充规则通过fill-rule属性来指定  （提供两种选项用于指定如何判断图形的"内部"）
  • 折线 <polyline> (曲线)  元素是用于创建任何只有直线的形状
    • 必选： 至少2组点
  • 路径 <path>  http://www.cnblogs.com/xuey/p/8492498.html

 

文本

  • 文本<text>
    • 必选： x y fill   
      • x 起始位置
      • y 起始位置
      • fill 填充颜色
  • 文本路径<textPath>作用就是放在<text>标记内部引用预定义的<path>，引用时，我们需要使用xlink:href属性指明需要引用的路径的ID。在SVG里，处理能沿直线方向写文字外，还能够使用<path>先定义一条路径，让文字沿着定义好的路径排列
  •  1 <svg width="100%" height="100%" viewBox="0 0 1000 300"
 2      xmlns="http://www.w3.org/2000/svg" 
 3      xmlns:xlink="http://www.w3.org/1999/xlink">
 4   <defs>
 5     <path id="MyPath"
 6           d="M 100 200 
 7              C 200 100 300   0 400 100
 8              C 500 200 600 300 700 200
 9              C 800 100 900 100 900 100" />
10   </defs>
11 
12   <use xlink:href="#MyPath" fill="none" stroke="red"  />
13 
14   <text font-family="Verdana" font-size="42.5">
15     <textPath xlink:href="#MyPath">
16       我先往上去，然后往下去，然后再往上去，漂亮吧！
17     </textPath>
18   </text>
19 
20   <!-- Show outline of the viewport using 'rect' element -->
21   <rect x="1" y="1" width="998" height="298"
22         fill="none" stroke="black" stroke-width="2" />
23 </svg>
  • <tspan>标记的作用是将一段文本包裹起来，你可以对这段包裹的文字的颜色、位置、形状等特征进行单独的修饰，它跟HTML标记<span>的作用非常相似
  •  1 <style>
 2     text{font: 20px Verdana, Helvetica, Arial, sans-serif;}
 3     tspan{  fill: red; font-weight: bold}
 4 </style>
 5 <svg width="250" height="100" viewBox="0 0 250 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
 6     <text x="15" y="30">你丫的
 7       <tspan>不是</tspan> 
 8       一个香蕉
 9     </text>
10 </svg>

 

stroke 属性

    • stroke  颜色
    • stroke-width  宽度
    • stroke-linecap  不同类型的开放路径的终结
      • butt    直角原状态
      • round 圆角
      • square 加长方角（点的重合）
    • stroke-dasharray  用于创建虚线
      • 一个参数时： 表示一段虚线长度和每段虚线之间的间距 / 定义描边的虚线长度，如果提供奇数个，则会自动复制该值成偶数
      • 两个参数或者多个参数时：一个表示长度，一个表示间距/第一个为虚线的宽度     第二个是虚线之间的间距
    • stroke-dashoffset 定义虚线描边的偏移量

滤镜  fe 后缀可用于所有的滤镜    滤镜调试  http://jorgeatgu.github.io/svg-filters/

  • <feGaussianBlur> 元素是用于创建模糊效果

    • <defs>元素定义短并含有特殊元素（如滤镜）定义

    • <filter>标签用来定义SVG滤镜 

      • <filter>元素id属性定义一个滤镜的唯一名称
      • <feGaussianBlur>元素定义模糊效果
      • in="SourceGraphic"这个部分定义了由整个图像创建效果
      • stdDeviation属性定义模糊量
      • <rect>元素的滤镜属性用来把元素链接到"f1"滤镜   filter="url(#f1)" 
  • <feOffset>元素是用于创建阴影效果
      • <filter>元素id属性定义一个滤镜的唯一名称
      • 例子： 
        1 <defs>
2     <filter id="f1" x="0" y="0" width="200%" height="200%">
3       <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
4       <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
5       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
6     </filter>
7   </defs>
8   <rect width="90" height="90" stroke="green" stroke-width="3"
9   fill="yellow" filter="url(#f1)" />

         <feOffset>元素的属性改为"SourceAlpha"在Alpha通道使用残影，而不是整个RGBA像素

  • <linearGradient>元素用于定义线性渐变

    • <linearGradient>标签必须嵌套在<defs>的内部。

    • <defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。

    • 线性渐变可以定义为水平，垂直或角渐变：

      • 当y1和y2相等，而x1和x2不同时，可创建水平渐变
      • 当x1和x2相等，而y1和y2不同时，可创建垂直渐变
      • 当x1和x2不同，且y1和y2不同时，可创建角形渐变
      • <linearGradient>标签的id属性可为渐变定义一个唯一的名称
      • <linearGradient>标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置
      • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。
      • 填充属性把 ellipse 元素链接到此渐变
      • 例子：
      • 1 <defs>
2     <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
3       <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
4       <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
5     </linearGradient>
6   </defs>
7   <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  • <radialGradient>元素用于定义放射性渐变
    • <radialGradient>标签的 id 属性可为渐变定义一个唯一的名称
    • CX，CY和r属性定义的最外层圆和Fx和Fy定义的最内层圆
    • 渐变颜色范围可以由两个或两个以上的颜色组成。每种颜色用一个<stop>标签指定。offset属性用来定义渐变色开始和结束
    • 填充属性把ellipse元素链接到此渐变
    • 例子：
    • 1 <defs>
2     <radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
3       <stop offset="0%" style="stop-color:rgb(255,255,255);
4       stop-opacity:0" />
5       <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
6     </radialGradient>
7   </defs>
8   <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  • <pattern>图像做背景填充形状
    • pattern 
      • userSpaceOnUse:    使用百分比配置

　　　　　　　　　　另一种是将pattern的宽度和高度固定住，在指定区域内平铺，能铺多少铺多少，超出部分裁掉。对应的属性为patternUnits="userSpaceOnUse"。相应的width和height即pattern的宽度和高度。 需要注意的是，userSpaceOnUse的pattern并不会在每个指定区域(形状元素)内重新以区域左上角开始排序。userSpaceOnUse的pattern的起点坐标只有一个，就是其x和y表示的在svg画布坐标系中的位置。

      • objectBoundingBox: 使用宽高值配置

　　　　　　　　　　我们通过指定width和height来间接规定图案平铺的数量。因为这时，width和height被限制在0~1，或者0%~100%之间，即宽度或高度占填充区域高度或宽度的百分比。可想而知20%放5个，40%放2.5个;patternUnits并不会对内部的图案做缩放;默认情况下，pattern图案会将填充区域的左上角作为起点坐标(origin point)(0,0)。当然也可以通过设置x和y属性的值改变这个起点坐标。x和y分别表示相对于起点坐标的偏移量。在patternUnits="objectBoundingBox"情况下，x和y的值乘以填充区域相应的宽度和高度，即为实际起点坐标偏移量。

  •  1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
 2     <defs>
 3         <pattern id="avatar" x="0" y="0" width="100%"  height="100%" patternContentUnits="objectBoundingBox">
 4             <image width="1" height="1" xlink:href="http://userimg.yingyonghui.com/head/24/1458708838143/5426424.png-thumb"/>
 5         </pattern>
 6         <style>
 7             circle, rect {
 8                 stroke: #ff9900;
 9                 stroke-width: 5px;
10             }
11         </style>
12     </defs>
13     <g>
14         <circle cx="100" cy="100" r="50" fill="url(#avatar)"/></circle>
15         <rect x="10" y="10" rx="20" ry="20" width="100" height="100" fill="url(#avatar)"/></rect>
16     </g>
17    </svg>

    • patternContentUnitspattern的缩放和排布由patternUnits控制，

　　而pattern内部的图案的缩放和排布由patternContentUnits控制。

　　patternContentUnits也有两个属性：objectBoundingBox和userSpaceOnUse（默认属性值）

    • objectBoundingBox
      • 在userSpaceOnUse模式下，pattern内部元素的大小不会因为pattern的缩放而改变。userSpaceOnUse是patternContentUnits的默认属性值

    • objectBoundingBox

      • 在objectBoundingBox模式下，pattern内部元素所有属性的数值都会根据设置的比例，乘以pattern的width或height计算出实际长度。pattern内部元素所有属性的数值如果后面不带百分号%，都乘上100作为百分比数。所以像stroke-width默认值是1的这种属性，如果不指定一个数值，就会被当成100%来计算，结果就是撑满整个pattern。
    •  1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
 2         <defs>
 3             <pattern id="tile1" patternUnits="objectBoundingBox"  x="0" y="0" width=".2" height=".2" patternContentUnits="objectBoundingBox">
 4                 <path d="M 0 0 Q .05 .2 .1 .1 T .2 .2" style="stroke: black; fill: none; stroke-width: .01;"></path>
 5                 <path d="M 0 0 h .2 v .2 h-.2z" style="stroke: black; fill: none; stroke-width: .01;"></path>
 6             </pattern>
 7         </defs>
 8         <g transform="translate(20,20)">
 9             <rect x="0" y="0" width="100" height="100" style="fill:url(#tile1); stroke: black;"></rect>
10         </g>
11         <g transform="translate(135,20)">
12             <rect x="0" y="0" width="70" height="80" style="fill:url(#tile1); stroke: black;"></rect>
13         </g>
14         <g transform="translate(220,20)">
15             <rect x="0" y="0" width="150" height="80" style="fill:url(#tile1); stroke: black;"></rect>
16         </g>
17 </svg>

    • pattern中内嵌pattern

      允许在一个pattern中的元素内，嵌入另一个pattern

    •  1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
 2     <defs>
 3         <pattern id="stripe" x="0" y="0" width=".2" height=".3333" patternContentUnits="objectBoundingBox">
 4             <path d="M0 0h1" stroke="grey" stroke-width=".01"></path>
 5             <path d="M0 0v1" stroke="grey" stroke-width=".01"></path>
 6         </pattern>
 7         <!-- 可以在pattern的属性中使用viewBox完全替代patternContentUnits="objectBoundingBox" 
 8         如果有viewBox属性，patternContentUnits属性将被忽略 
 9         viewBox: x y w h -->
10         <pattern id="circle" x="0" y="0" width=".2" height=".25" viewBox="0 0 50 40">
11             <circle cx="20" cy="20" r="15" fill="url(#stripe)" stroke="black"></circle>
12         </pattern>
13     </defs>
14     <path d="M0 0 h300v300h-300z" fill="url(#circle)" stroke="black"></path>
15 </svg>

       

结构元素

  • <defs>定义元素
  • <use>标记的作用是能从SVG文档内部取出一个节点，克隆它，并把它输出到别处，例子：
  •  1   <svg width="100%" height="300" xmlns="http://www.w3.org/2000/svg" viewBox='0 0 50 100'>
 2   <style>
 3     .classA { fill:red }
 4   </style> 
 5   <defs>
 6     <g id="Port">
 7       <circle style="fill:inherit" r="10"/>
 8     </g>
 9   </defs>
10   <text y="15">black</text>
11   <use x="50" y="10" xlink:href="#Port" />
12   <text y="35">red</text>
13   <use x="50" y="30" xlink:href="#Port" class="classA"/>
14   <text y="55">blue</text>
15   <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
16  </svg>
  • <symbol>标记的作用是定义一个图像模板，你可以使用<use>标记实例化它，然后在SVG文档中反复使用，这种用法非常的高效。<symbol>本身不会输出任何图像，只有使用<use>实例化后才会显示。
  •  1 <svg viewBox="0 0 150 150" height='300'  xmlns="http://www.w3.org/2000/svg" >
 2 
 3 <symbol id="sym01" viewBox="0 0 150 110">
 4   <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
 5   <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
 6 </symbol>
 7 <use xlink:href="#sym01"
 8      x="0" y="0" width="100" height="50"/>
 9 <use xlink:href="#sym01"
10      x="0" y="50" width="75" height="38"/>
11 <use xlink:href="#sym01"
12      x="0" y="100" width="50" height="25"/>
13 </svg>
  • <g>标记就是‘group’的简写，是用来分组用的，它能把多个元素放在一组里，对<g>标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承<g>标记上的所有属性。用<g>定义的分组还可以使用<use>进行复制使用。
  • 1 <svg viewBox="0 0 95 50" xmlns="http://www.w3.org/2000/svg">
3    <g stroke="green" fill="white" stroke-width="5">
4      <circle cx="25" cy="25" r="15"/>
5      <circle cx="40" cy="25" r="15"/>
6      <circle cx="55" cy="25" r="15"/>
7      <circle cx="70" cy="25" r="15"/>
8    </g>
9 </svg> 

参考手册：https://www.w3cplus.com/svg-tutorial

http://know.webhek.com/svg/svg-home.html 

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

 https://developer.mozilla.org/zh-CN/docs/Web/SVG 

 http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201507082192.html 

 https://segmentfault.com/a/1190000009278935

posted @ 2018-03-04 13:40  柔和的天空  阅读(1847)  评论(0)  编辑  收藏  举报