SVG 入门及实践

时间  2019-11-10
标签 svg 入门 实践 繁體版
原文   原文链接

SVN基本结构

<html>
<body>

<h1>My first SVG</h1>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9;" />
</svg>

</body>
</html>

SVG 路径 -

元素应该是 SVG 中最多见的形状。你能够经过 path 元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其余的形状。 javascript

元素用于定义一个路径。 html

下面的命令可用于路径数据：java

- 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

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

下面是一个path的实例：ide

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
  <path d="M150 0 L75 200 L225 200 Z" /> 
</svg>

旋转的文字：svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text> 
</svg>

路径上的文字：svn

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
   <defs> 
    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" /> 
  </defs> 
  <text x="10" y="100" style="fill:red;"> 
    <textPath xlink:href="#path1">I love SVG I love SVG</textPath> 
  </text> 
</svg>

文字分组换行：post

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
  <text x="10" y="20" style="fill:red;">Several lines: 
    <tspan x="10" y="45">First line</tspan> 
    <tspan x="10" y="70">Second line</tspan> 
  </text> 
</svg>

文字做为连接：测试

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <a xlink:href="//www.w3cschool.cn/svg/" target="_blank"> 
    <text x="0" y="15" fill="red">I love SVG</text> 
  </a> 
</svg>

SVG Stroke 属性

SVG提供了一个范围普遍stroke 属性。在本章中，咱们将看看下面：动画

- stroke
- stroke-width
- stroke-linecap
- stroke-dasharray

全部stroke属性，可应用于任何种类的线条，文字和元素就像一个圆的轮廓。

SVG 滤镜

在本教程中，咱们将仅展现一个可能采用的特殊效果。基础知识展现后，你已经学会使用特殊效果，你应该可以适用于其余地方。这里的关键是给你一个怎样作SVG的想法，而不是重复整个规范。

SVG可用的滤镜是：

- feBlend - 与图像相结合的滤镜
- feColorMatrix - 用于彩色滤光片转换
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset - 过滤阴影
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight - 用于照明过滤
- fePointLight - 用于照明过滤
- feSpotLight - 用于照明过滤

Remark 除此以外，您能够在每一个 SVG 元素上使用多个滤镜！

使用滤镜的实例：

1.模糊效果

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <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"滤镜

2.阴影效果

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" 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(#f1)" />
</svg>

实现阴影效果分为四个步骤：

1首先经过feoffset滤镜实现图形的复制偏离;

2.经过feBlend滤镜对源图形以及复制的偏离图形作图像混合处理;

3.经过feColorMatrix滤镜对阴影颜色作矩阵计算；

4.经过feGaussianBlur滤镜实现模糊效果；

SVG动画

实例1：（重复用 5 秒时间淡出的矩形）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="20" y="20" width="250" height="250" style="fill:blue">
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
  </rect>
</svg>

实例2：（矩形会变大并改变颜色）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime"> 
    <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" /> 
    <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" /> 
    <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" /> 
    <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" /> 
    <animateColor attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze" />
  </rect>
</svg>

实例3：（沿一个运动路径移动、旋转并缩放的文本 + 逐步放大并改变颜色的矩形）

<!DOCTYPE html>
<html>
<body>

<p><b>Note:</b> This example only works in Firefox and Google Chrome.</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime"> 
    <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" /> 
    <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" /> 
    <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" /> 
    <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" /> 
    <animateColor attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze" />
  </rect>
  <g transform="translate(100,100)"> 
    <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
      <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze" />
      <animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze" />
      <animateColor attributeName="fill" attributeType="CSS" from="red" to="blue" begin="1s" dur="5s" fill="freeze" /> 
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze" /> 
      <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze" /> 
    </text> 
  </g>
</svg>

</body>
</html>

与javascript交互

经过getSVGDocument()获取svgDocument

function setup (document) {
// do something with svg docuemnt
}
 
setup(document.getElementById('svg-embed').getSVGDocument());

获取了SVG的document以后，就能够像往常那样获取内部元素属性、绑定事件等等。还能够定义一个document为参数的方法造成局部变量，要对某个引入SVG文档进行操做时就获取该文档的document对象传入，想获取主文档的对象时就使用window.document便可

须要注意的是，要操做SVN就须要知足同源策略；

通常在javascript中动态建立DOM元素能够经过createElement方法来建立，可是用这个API来建立SVN元素是不会生效并展现的；

这是由于建立SVG元素须要指定命名空间，就像须要在svg标签上设定xmlns为http://www.w3.org/2000/svg。正确的构造方式是调用createElentNS()方法，并将”http://www.w3.org/2000/svg”做为第一参数传入。

此外，不一样于HTML元素对象能够直接对一些属性赋值，SVG元素对象都须要经过调用setAttribute()方法来设定属性值。由于大部分属性都是SVGAnimatedLength类型，即便要经过属性赋值也要写成相似c.r.baseVal.value
= 7，多层访问其下属性。不过像fill、stroke等默认都是undefined，因此使用setAttribute()是更好的选择。

<svg xmlns="http://www.w3.org/2000/svg"    
xmlns:xlink="http://www.w3.org/1999/xlink"    
version="1.1" width="20" height="20">    
   <script type="text/javascript">         
       var c = document.createElementNS('http://www.w3.org/2000/svg','circle');                c.setAttribute('cx', 10);        
       c.setAttribute('cy', 10);        
       c.r.baseVal.value = 7;        
       c.setAttribute('fill', 'green');         
       document.rootElement.appendChild(c);    
   </script>
</svg>

经过setAttributeNs()设置属性

除了元素有命名空间，有些属性也有其特定的命名空间。好比在HTML极为经常使用的a标签的，在SVG中又有存在，可是对于其href属性，在SVG之中就必须加上xmlns:前缀来指定其命名空间了。对于设置这些属性也须要用setAttributeNS()方法并将”http://www.w3.org/1999/xlink“做为第一参数传入。

var a = document.createElementNS('http://www.w3.org/2000/svg','a');        a.setAttributeNS('http://www.w3.org/1999/xlink',
    'xlink:href', 
    'http://blog.iderzheng.com/');

SVG与窗口坐标系的转换

这个内容要测试加深理解

function click(e) {    
    // rootElement is specific to SVG document    
    // documentElemnt is to any XML document include HTML    
    // they both can retrieve the root element of a document     
    var r = document.rootElement || document.documentElement,    
    pt = r.createSVGPoint(),    
    im = r.getScreenCTM().inverse(); 
    // inverse of tranforma matrix     
    // set point with window coordination    
    pt.x = e.clientX;    
    pt.y = e.clientY;     
    // convert point to SVG coordination    
    var p = pt.matrixTransform(im);
}

动画开发

辅助性的脚本库：TweenMax.min.js

参考网站：https://tympanus.net/codrops/?s=svg&search-type=posts

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