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 ...
随机推荐
- 初始python(三)
1. 循环 if, while, forbreak : 结束整个循环continue :跳出当前这次循环,但不结束整个循环else :结束整个循环后才执行,不能与break合用,但可以与continu ...
- 13、Node.js 全局对象
主要用于调试,显示信息,重点看例子在浏览器 JavaScript 中,通常 window 是全局对象, Node.js 中的全局对象是 global ####__filename__filename ...
- 021.1 IO流——File类
########################################IO流: IO:用于处理设备上的数据的技术.设备:内存,硬盘,光盘 流:系统资源,Windows系统本身就可 ...
- Linux中安装Nginx
1.安装编译文件及库文件 yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel 2.安装PCRE,Ngi ...
- centos 7.0 查看selinux状态|关闭|开启
Linux在安装好之后通常SELinux都是出于默认开启的状态,开启的情况下会导致一些服务的安装不成功. 在不需要的情况下完全可以关闭掉,下面是在centos 7.0里面如何查看,关闭selinux. ...
- 软件分享:将应用一键打包成dmg文件
简介 苹果软件开发完成后,都要打包成dmg文件.通常的做法也许是到系统自带的磁盘工具里制作dmg文件,但这样做比较繁琐,尤其是要打包多个应用时,每次只能制作一个dmg文件很麻烦.分享一个很好用很方便的 ...
- 使用Fiddler监控来自手机客户端的请求
环境配置组成: 1 手机 2 安装Fiddler的PC 设置要点: 1 手机和PC应在同一个局域网内 我的做法是:PC安装WIFI热点,手机连接热点上网 PC的IP是192.168.95.1 手机的 ...
- 【算法学习】AVL平衡二叉搜索树原理及各项操作编程实现(C语言)
#include<stdio.h> #include "fatal.h" struct AvlNode; typedef struct AvlNode *Positio ...
- GitHub学生认证示范
打开网址:https://education.github.com/ 点击Get Your Pack 点击I am a Student 填写资料上传学生证照片,等待通过,如果没有GitHub账号就注 ...
- uboot中ftd命令
可以从u-boot官网源码下载一个比较新的u-boot, 查看它的cmd/fdt.cftp://ftp.denx.de/pub/u-boot/ fdt命令使用示例nand read.jffs2 320 ...