SVG中嵌入HTML元素 

<?xml version="1.0" standalone="yes"?>   
<style>
    .clsfont{
    border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px
    }
    .clsheader{
    background-color:#f0a3bf;line-height:37px;color:#999;font-size:14px;text-align:center;font-family:微软雅黑;font-size:16px;border-left:1px solid #fff;border-top:1px solid #fff;border-bottom:1px solid #fff
    }
</style>   
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
  <foreignobject x="0" y="0" width="415" height="203">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <table  border="0" cellpadding="0" cellspacing="0"  width="415">
    <tr>
      <td width="8" style="border-left:1px solid #fff;border-top:1px solid #fff;border-bottom:0"> </td>
      <td width="18%"  scope="col" class="clsfont"> </td>
      <td width="22%"  scope="col" class="clsfont"><strong>数量</strong></td>
      <td width="22%"  scope="col" class="clsfont"><strong>占比</strong></td>
      <td width="36%"  scope="col" class="clsfont"><strong>环比上升（下降）</strong></td>
    </tr>
    <tr>
      <th scope="row" class="clsheader"> </th>
      <td  scope="row" class="clsfont"><strong>分类 </strong></td>
      <td class="clsfont">44</td>
      <td class="clsfont">11%</td>
      <td class="clsfont"><span class="up"></span>11%</td>
    </tr>
    <tr>
      <th  scope="row"  class="clsheader"> </th>
      <td  scope="row" class="clsfont"><strong>论坛 </strong></td>
      <td class="clsfont">44</td>
      <td class="clsfont">11%</td>
      <td class="clsfont"><span class="down"></span>11%</td>
    </tr>
    <tr>
      <th scope="row"class="clsheader"> </th>
      <td  scope="row" class="clsfont"><strong>博客 </strong></td>
      <td class="clsfont">44</td>
      <td class="clsfont">11%</td>
      <td class="clsfont"><span class="down"></span>11%</td>
    </tr>
    <tr>
      <th scope="row"  class="clsheader"> </th>
      <td  scope="row" class="clsfont"><strong>微博 </strong></td>
      <td class="clsfont">44</td>
      <td class="clsfont">11%</td>
      <td class="clsfont"><span class="down"></span>11%</td>
    </tr>  
  </table>
    </body>
  </foreignobject>
</svg>

　　

posted @ 2017-11-30 11:48  Perfectionist  阅读(1152)  评论(0)    收藏  举报