SVG学习

时间  2019-12-04
标签 svg 学习 繁體版
原文   原文链接

svg 第一个实例

<?xml version="1.0" standalone="no"?>

  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="100%" height="100%" version="1.1"
           xmlns="http://www.w3.org/2000/svg">

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

  </svg>

svg reference

https://developer.mozilla.org/en-US/docs/Web/SVGhtml

svg 简介

SVG 有一些预约义的形状元素，可被开发者使用和操做：segmentfault

画布<svg>
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
组<g>,<defs>
图片<image>
描述<title>, <desc>
文本<text>

SVG绘制基本图形

<svg width="100%" height="180px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
    <!--画四边形-->
    <rect x="10" y="10" width="80" height="40" rx="20" ry="10" stroke="red" fill="#EEE" stroke-width="3"></rect>
    <!-- x 为四边形左上角距容器元素左端的距离，y为四边形左上角距容器元素上端的距离 ，width为四边形的宽度，height为四边形的高度,rx为x轴上圆角半径，ry为y轴上圆角半径, stroke为边界的颜色，fill为填充颜色，stroke-width为边界的宽度,opacity为整个四边形的透明度，fill-opacity为填充颜色的透明度，stroke-opacity为边界的透明度，width,height,stroke,fill,stroke-opacity,fill-opacity,stroke-width等能够放到style中-->
    <!--画圆-->
    <circle cx="260" cy="60" r="50"></circle>
    <!-- cx为圆心距容器元素左端的距离， cy为圆心距容器元素上端的距离，r为半径 -->
    <!--画椭圆-->
    <ellipse cx="460" cy="60" rx="80" ry="50"></ellipse>
    <!--cx为椭圆中心点的x坐标，cy为y坐标，rx是水平轴半径，ry是垂直轴半径-->
    <!--画直线-->
    <line x1="560" y1="20" x2="650" y2="100" style="stroke:rgb(99,99,99);stroke-width:2"></line>
    <!--x1,y1为起点坐标， x2，y2为终点坐标-->
    <!--画折线-->
    <polyline stroke="#000" fill="#FFF" stroke-width="1" points="660,20 680,90 720,60"></polyline>
    <!-- points是指这线上的转折点 -->
    <!--画多边形-->
    <polygon stroke="#000" fill="#FFF" stroke-width="1" points="760,20 780,90 820,60"></polygon>
    <!--画曲线-->
    <path d="M853 34C853 94 900 94 900 30" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!--画水平线-->
    <path d="M910,50H960" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!-- 画竖线 -->
    <path d="M980,10V90" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!-- 画直线 -->
    <path d="M1010,10L1050,90" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <!--画平滑曲线-->
    <path d="M1060,50S1080,90 1100,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此处的S(x1,y1)是(1060,50)-->
    <!--画平滑曲线-->
    <path d="M1060,50S1080,90 1100,50S1120,90 1140,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此处的第二个S(x1,y1)是(1080,90)关于(1140,50)的对称点-->
    <!--二次贝塞尔曲线-->
    <path d="M1120,50Q1140,90 1160,50" stroke="#000" fill="#FFF" stroke-width="1"></path>
    <path d="M1180,50Q1200,90 1220,50T1240,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此处的第二个T(x1,y1)是(1200,90)关于(1220,50)的对称点-->
    <path d="M1180,50T1240,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此处的第二个T(x1,y1)是(1180,50)-->
</svg>

path命令参考http://www.w3.org/TR/SVG/paths.htmlsvg

svg rect

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

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

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

rx 和 ry 属性可以使矩形产生圆角。url

svg circle

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

cx 和 cy 属性定义圆点的 x 和 y 坐标。若是省略 cx 和 cy，圆的中心会被设置为 (0, 0)
r 属性定义圆的半径spa

svg ellipse

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

cx 属性定义圆点的 x 坐标code

cy 属性定义圆点的 y 坐标orm

rx 属性定义水平半径xml

ry 属性定义垂直半径htm

<svg height="150" width="500">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>

<svg height="100" width="500">
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>

svg line

<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束图片

svg polyline 折线

<svg height="200" width="500">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

<svg height="180" width="500">
  <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 polygon 多边形

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

<svg height="210" width="500">
  <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 height="210" width="500">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

points 属性定义多边形每一个角的 x 和 y 坐标

svg path 路径

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

以上全部命令均容许小写字母。大写表示绝对定位，小写表示相对定位。

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

svg text

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

特定属性：
x, y: 表示文本的横纵坐标
dx,dy: 表示移动的横纵坐标
rotate: 表示旋转的度数

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
      <text x="5"  y="10" 
        style="font-family: Times New Roman;
               font-size  : 24;
               stroke     : #00ff00;
               fill       : #0000ff;">
    SVG text styling
      </text>
    </svg>

text-archor: The text-anchor attribute is used to align (start-, middle- or end-alignment) a string of text relative to a given point.

<svg width="120" height="230" viewBox="0 0 120 230"
 xmlns="http://www.w3.org/2000/svg" version="1.1">

<!-- Materialisation of anchors -->
<path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />


<!-- Anchors in action -->
<text text-anchor="start"
      x="60" y="40">A</text>

<text text-anchor="middle"
      x="60" y="75">A</text>

<text text-anchor="end"
      x="60" y="110">A</text>

<!-- Materialisation of anchors -->
<circle cx="60" cy="40" r="3" fill="red" />
<circle cx="60" cy="75" r="3" fill="red" />
<circle cx="60" cy="110" r="3" fill="red" />

效果：请输入图片描述

属性

stroke: 用于定义给定图形元素的轮廓颜色
stroke-width: 用于定义给定图形元素的轮廓线条大小

<circle r="15" style="stroke: grey; stroke-width:2; fill: red;"/>

stroke

stroke-linecap

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="16">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

请输入图片描述

stroke-dasharray
stroke-dasharray定义断续线

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

请输入图片描述

stroke-opacity
stroke-opacity不透明度

<svg width="500" height="120">
<text x="22" y="40">欢迎光临www.waylau.com</text>
<path d="M20,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 0.3;
             " />
<path d="M80,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 0.7;
             " />
<path d="M140,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 1;
             " />
</svg>

SVG Filters之虚化Blur Effects

<svg height="110" width="110">
  <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>

代码解释：
该元素的id属性定义了滤镜的惟一名称
元素定义了虚化效果
在in=“SourceGraphic”部分定义了在整个元素中建立的效果
该stdDeviation属性定义虚化的值
该元件的滤镜属性连接到了“f1”滤镜

SVG Filters之阴影Drop Shadows

示例1 SVG 

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

代码解释：
该元素的id属性定义了滤镜的惟一名称
该元件的滤镜属性连接到了“f1”滤镜

请输入图片描述

示例2 加上了 

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f2)" />
</svg>

示例3

<svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

请输入图片描述

代码解释：
元素改为了"SourceAlpha"虚化中的Alpha通道代替了RGBA像素

示例4

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />

代码解释：
转换颜色，使偏移图片的颜色值接近空（0）
矩阵中三个'0.2'是获取了red、green、blue 通道
请输入图片描述

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程