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>

SVG中嵌入HTML元素的更多相关文章

[翻译svg教程]svg中的circle元素
svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...
[翻译svg教程]svg 中的g元素
svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...
使用SVG中的Symbol元素制作Icon【摘转】
以下为内容摘抄和转摘记录: 为什么要用svg ? SVG优势随着高清屏幕的普及,相比使用png等位图而言,使用SVG等矢量图形是一种全新的设计方式.更重要的是相比位图而言,SVG有着无可比拟的优势. ...
使用iframe方式获得svg中的DOM元素，和svg 的 contentDocument 返回 null
碰到这个的相关问题,百度找了好久,找到了个解决方法,原址 https://segmentfault.com/q/1010000009001758 var iframe = document.getEl ...
CSS和SVG中的剪切——clip-path属性和<clipPath>元素
剪切是什么剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...
【转】CSS和SVG中的剪切——clip-path属性和<clipPath>元素
本文由大漠根据SaraSoueidan的<Clipping in CSS and SVG – The clip-path Property and <clipPath> Elemen ...
在WinForm应用程序中嵌入WPF控件
我们知道,在WPF界面上添加WinForm的控件需要使用WindowsFormHost类.而在WinForm界面上添加WPF控件该如何做呢?有没有类似的类呢?明显是有的,ElementHost就是为了 ...
在页面中嵌入svg的几种方法
//在页面中嵌入svg的方法1:使用 <embed> 标签<embed> 标签被所有主流的浏览器支持,并允许使用脚本.注释:当在 HTML 页面中嵌入 SVG 时使用 < ...
HTML页面中嵌入SVG
HTML页面中嵌入SVG的几种方式你有N种理由使用SVG在页面中展示图像,如它的矢量特性.广泛的浏览器支持.比JPEG和PNG更小的体积.可用CSS设置外观.使用DOM API操作以及各种可用的SV ...

随机推荐

Asp.Net MVC Identity 2.2.1 使用技巧（一）
开发环境:vs2015 UP3 or vs2017RC 项目环境:asp.net 4.6.1 identity版本为:asp.net identity 2.2.1 1.创建项目. 没什么好说 ...
[T-ARA][거짓말(Part.1)][谎言(Part.1)]
歌词来源:http://music.163.com/#/song?id=5403062 作曲 : 赵英秀 [作曲 : 赵英秀] 作词 : 安英民 [作词 : 安英民] 사랑한단 거짓말 보고싶을거란 ...
Linux 系统性能监控命令详解
Linux 系统性能监控命令详解 CPU MEMORY IO NETWORK LINUX进程内存占用查看方法系统负载过重时往往会引起其它子系统的问题,比如:->大量的读入内存的IO请求(pag ...
webpack和gulp
在没有使用任何自动化工具之前,如果用sass写了css, 用coffee写了js, 那么我们必须手动用相应的compiler去编译各自的文件,然后各自minify(js,css文件压缩并合并).这时如 ...
IE8崩溃在CElement::GetUpdatedLayoutWithContext
发了一个我们页游助手的版本时,测试报告在某些机器上点开某网站时崩溃 "0x637e5067指令引用的0x00000008内存,该内存不能为read",查看dump文件,堆栈如下: ...
apache、nginx实现反向代理
一.apache(不推荐): 代理80端口:a. 配置:b. 效果:c. 配置文件参考: ServerRoot "/etc/httpd" Listen 80 ProxyPass / ...
seek()和tell()在文件里转移
Seek()方法允许在输入和输出流移动到任意的位置,seek()有好几种形式.包含:seekp() 方法和seekg()方法,p是put的意思,g是get的意思:其中输入流里用seekg()函数,输出 ...
定义一个类Point，代表一个点，public属性有x和y，方法有显示点坐标 show（），构造函数有两个参数分别给x,y赋值，在main方法中构造两个对象，再创建一方法(getMiddle)为取两个点构成线段的中点的坐标，参数为2个点对象，调用此方法后得到一个新的点，编写Application，显示该对象的坐标值。
这个题让我更加明白了类创建对象的实质代码中用到:1.对象作形参;2.对象作返回值以下用代码具体分析: class Point1{ public double x; public double y; ...
myeclipse安装SVN插件方法
http://www.cnblogs.com/xdp-gacl/p/3497016.html myeclipse安装SVN插件方法 SVM China 源代码托管中心 http://www.svnch ...
Office365学习笔记—Lookup类型加载条目过多解决方案
1,随着接触的项目越来越多,遇到的各种奇葩的问题也越来越多,不得不说,SharePoint是个好东西,提高了开发效率,简化了很多基础的功能.但是令人头疼的问题是,当你想做个稍微复杂点的功能,就不得不研 ...

SVG中嵌入HTML元素

SVG中嵌入HTML元素的更多相关文章

随机推荐

热门专题