码迷,mamicode.com
首页 > 其他好文 > 详细

SVG 总结

时间:2017-05-26 20:07:40      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:fill   doctype   总结   att   namespace   use   结果   label   circle   

 

 

//文件名:11.svg
<?
xml version="1.0" encoding="UTF-8" ?> <!--XML NameSpace:名称空间,用于指定标签所处的语境--> <svg xmlns="http://www.w3.org/2000/svg" width="500" height="400"> <rect width="250" height="200"></rect> </svg>

 

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <h3>H5标准之前使用SVG图形的方法</h3>
  <img src="11.svg">
</body>
</html>

 

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      text-align: center;
    }
    svg {
      background: #dddddd;
      width: 500px;
      height: 400px;
    }
  </style>
</head>
<body>
<!--<rect width="250" height="200"></rect>-->
  <h3>H5标准之后使用SVG标签的方法</h3>
  aa
  <svg>
    <rect width="250" height="200"></rect>
    <!--<div>ABC</div>-->
  </svg>
  bb
</body>
</html>

 

svg 绘制矩形:

效果:

技术分享

代码:

 

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      text-align: center;
    }
    svg {
      background: #ddd;
    }
  </style>
</head>
<body>
<!--<div style="stroke:#000">ABCD</div>-->

  <h3>SVG绘图——矩形</h3>
  <svg width="500" height="400">
    <!--左上角-->
    <rect width="100" height="80"></rect>
    <!--右上角-->
    <rect width="100" height="80" x="400" y="0"></rect>
    <!--左下角-->
    <rect width="100" height="80" x="0" y="320" fill="#f00" fill-opacity=".3" stroke="#a00" stroke-width="5" stroke-opacity=".8"></rect>
    <!--右下角-->
    <rect id="r4" width="100" height="80" x="400" y="320" style="fill:#0f0;stroke:#060;"></rect>
  </svg>
<script>
  //不能使用HTML DOM方式来访问SVG元素的属性
  //r4.width = 10;
  //r4.height = 800;
  //r4.x = 250;
  //r4.x.baseVal.value = 250;

  //使用核心DOM操作来访问SVG元素的属性
  var x = r4.getAttribute(x);
  console.log(x); //400
  console.log(typeof x);//string
  r4.setAttribute(x, 250);
</script>

</body>
</html>

 

 

svg绘制矩形2: 鼠标移入改变颜色:

结果:

技术分享

 

代码:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      text-align: center;
    }
    svg {
      background: #ddd;
    }
  </style>
</head>
<body>
  <h3>SVG绘图——矩形</h3>
  <svg width="500" height="400">
    <rect id="r1" width="100" height="80" x="200" y="160" fill="#0ff" fill-opacity=".3" stroke="#f00" stroke-opacity=".3"></rect>
  </svg>
  <script>
    r1.onmouseenter = function(){
      this.setAttribute(fill-opacity,1)
      this.setAttribute(stroke-opacity,1)
    }
    r1.onmouseleave = function(){
      this.setAttribute(fill-opacity,.3)
      this.setAttribute(stroke-opacity,.3)
    }
  </script>

</body>
</html>

 

svg绘制矩形3 点击改变宽度:

效果:

技术分享

 

 

代码:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      text-align: center;
    }
    svg {
      background: #ddd;
    }
  </style>
</head>
<body>
  <h3>SVG绘图——矩形</h3>
  <svg width="500" height="400">
    <!--<rect id="r1" width="100" height="80"></rect>-->
    <rect id="r1" width="100" height="80" x="0"></rect>
  </svg>
  <script>
    r1.onclick = function(){
      setInterval(function(){
        /*var x = r1.getAttribute(‘x‘);
        x = parseFloat(x);
        x += 10;
        r1.setAttribute(‘x‘, x);*/

        var w = r1.getAttribute(width);
        w = parseFloat(w);
        w += 5;
        r1.setAttribute(width, w);
      },50)
    }
  </script>

</body>
</html>

 

 

 svg绘制矩形4 绘制部门统计表:

效果:

技术分享

 

代码:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      text-align: center;
    }
    svg {
      background: #ddd;
    }
  </style>
</head>
<body>
  <h3>SVG绘图——矩形</h3>
  <svg id="svg17" width="500" height="400">
  </svg>
  <script>
    var list = [
      {label: 部门1, value: 250},
      {label: 部门2, value: 300},
      {label: 部门3, value: 280}
    ];
    /***为SVG上动态的添加新的图形元素***/
    //方式1:HTML字符串拼接
    /*var html = ‘‘;
    for(var i=0; i<list.length; i++){
      var d = list[i];
      html += `
        <rect width="50" height="${d.value}" x="${(2*i+1)*50}" y="50"></rect>
      `;
    }
    svg17.innerHTML = html;*/
    //方式2:动态创建新的DOM元素
    for(var i=0; i<list.length; i++){
      //var r = document.createElement(‘rect‘); //新元素的名称空间默认为html空间
      var r = document.createElementNS(http://www.w3.org/2000/svg, rect);
      r.setAttribute(width, 50);
      r.setAttribute(height, list[i].value);
      r.setAttribute(x, (2*i+1)*50);
      svg17.appendChild(r);
    }

  </script>

</body>
</html>

 

 svg 绘制圆形:

结果:

技术分享

 

代码:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      text-align: center;
    }
    svg {
      background: #ddd;
    }
  </style>
</head>
<body>
  <h3>SVG绘图——圆形</h3>
  <svg id="svg17" width="500" height="400">
    <circle r="50" cx="250" cy="200"></circle>
  </svg>


  <script>

  </script>

</body>
</html>

 

SVG 总结

标签:fill   doctype   总结   att   namespace   use   结果   label   circle   

原文地址:http://www.cnblogs.com/web-fusheng/p/6910207.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!