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 ...
随机推荐
- January 10 2017 Week 2nd Tuesday
Being entirely honest with oneself is a good exercise. 对自己完全坦诚是一种很棒的锻炼. It is difficult to know deep ...
- Homebrew 安装 MySQL
安装 Homebrew brew doctor 确认 brew 在正常工作 brew update 更新包 brew install mysql 安装 MySQL ==> Downloadi ...
- Python中根据提供的日期，返回是一年中的第几天
# coding = utf-8 import datetime dd = raw_input("Please enter date , format is YYYYMMDD:") ...
- Java基础知识强化之集合框架笔记78：ConcurrentHashMap之 ConcurrentHashMap、Hashtable、HashMap、TreeMap区别
1. Hashtable: (1)是一个包含单向链的二维数组,table数组中是Entry<K,V>存储,entry对象: (2)放入的value不能为空: (3)线程安全的,所有方法均用 ...
- InputStream TO byte
public class ByteToInputStream { public static final InputStream byte2Input(byte[] buf) { return new ...
- 1067. [SCOI2007]降雨量【线段树】
Description 我们常常会说这样的话:“X年是自Y年以来降雨量最多的”.它的含义是X年的降雨量不超过Y年,且对于任意 Y<Z<X,Z年的降雨量严格小于X年.例如2002,2003, ...
- Python 多线程 线程安全、daemon简介 (四)
线程安全 只能在Winodws下的ipython中演示,Python命令行.Pycharm.Mac下的ipython都演示不出效果 import threading def worker(): for ...
- 日期字符串解析--SimpleDateFormat严格限制日期转换setLenient(false)
输入“33/12/2011”,用SimpleDateFormat parse()方法,转化为Date(2012,01,02).这样处理相当“33/12/2011”是正常输入,如果需要"33/ ...
- 后台npm
后台进程运行 nohupwhich nohup.bash_profile中并source加载 如果没有就安装吧yum provides */nohup nohup npm start &原程序 ...
- 获取URL链接正则
public static final String HTTP_PATTERN = "http://[a-zA-Z0-9\\.\\/\\-_]+";