来源:5-1 SVG-<text>、<tspan> 以及其属性

黑白猪

2014-10-23 23:07

求源码

写回答 关注

2回答

  • cobn
    2017-05-26 22:54:38

    太感谢了


  • adrain
    2015-12-28 17:32:33

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
    </head>
    <body>
    <svg width="1200" height="1000" xmlns="http://www.w3.org/2000/svg">
       <defs>
           <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
               <path stroke="#f0f0f0" fill="none" d="M0 0H20V20"></path>
           </pattern>
       </defs>
       <rect width="1200" height="1000" fill="url(#grid)"></rect>
       <text id="sintext" x="100" y="100" style="font-size:30px;">
           ABCDEFGHIJKLMNOPQRSTUVWXYZ
       </text>
       <path d="M100,0V200M0,100H200" stroke="red"></path>
    </svg>
    <script>
       //x=[20,20,20...]
       //y=s * sin(w*x + t);
    var n=26;
       var x=[];
       var y=null;
       var i=n;
       var s=100;
       var w=1;
       var t=0;

       while (i--) x.push(20);

       function arrange(t){
           y= x.map(function(x){
               return s * Math.sin( w * x + t );
           });
       };

       function render(){
           sintext.setAttribute('dx', x.join(' '));
           sintext.setAttribute('dy', x.join(' '));
       }
       render();


    </script>
    </body>
    </html>

走进SVG

SVG是HTML5 中矢量图的标记语言,学习后掌握更多的干货

52662 学习 · 213 问题

查看课程

相似问题