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 ...

随机推荐

There was a problem confirming the ssl certificate: [SSL: TLSV1_ALERT_PROTOCOL_VERSION] tlsv1 alert protocol version (_ssl.c:661) - skipping
Could not fetch URL https://pypi.python.org/simple/xlrd/: There was a problem confirming the ssl cer ...
TCP/IP 协议图--传输层中的 TCP 和 UDP
TCP/IP 中有两个具有代表性的传输层协议,分别是 TCP 和 UDP. TCP 是面向连接的.可靠的流协议.流就是指不间断的数据结构,当应用程序采用 TCP 发送消息时,虽然可以保证发送的顺序,但 ...
41、Thead线程 System.Thread与互斥体Mutex
Thead线程 System.Thread 使用Thread类可以创建和控制线程.下面的代码是创建和启动一个新线程的简单例子.Thread 类的构造函数重载为接受ThreadStart和Paramet ...
Nowcoder Girl 初赛 T5
Nowcoder Girl 初赛第五题来源 Nowcoder Girl 初赛第五题题面 $n(1<=n<=10000)$件武器,每件武器对于属性有加成,一共五种属性.若使用其中的\ ...
C++课堂作业(1)
github链接: https://github.com/deepYY/object-oriented/tree/master/Circle 作业题目 Create a program that as ...
django创建项目问题解决办法
问题描述: Python编程:从入门到实践第十八章18.1.6 ❶(ll_env)learning_log$ django-admin.py startproject learning_log .❷ ...
Appfuse搭建过程（下源代码不须要maven，lib直接就在项目里（否则痛苦死！））
什么是Appfuse:AppFuse是一个集成了众多当前最流行开源框架与工具(包含Hibernate.ibatis.Struts.Spring.DBUnit.Maven.Log4J.Struts Me ...
python中的类（二）
python中的类(二) 六.类的成员字段:普通字段,静态字段 eg: class Province(): country=’中国’ #静态字段,保存在类中,执行时可以通过类或对象访问 def __ ...
【jQuery】Deferred（延迟）对象
本文针对jQuery-todolist项目中使用到的Deferred(延迟)对象进行具体分析 $.Deferred() 是一个构造函数,用来返回一个链式实用对象方法来注册多个回调,并且调用回调队列,传 ...
leetcode64. Minimum Path Sum
这个题是从左上角到右下角的路径和最小,实际就是一道dp题. 第一种写法是只初始化(0,0)位置,第二种写法则是把第一行.第一列都初始化了.个人更喜欢第二种写法,简单一点. dp的右下角的值就为最终的值 ...

SVG中嵌入HTML元素

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

随机推荐

热门专题