社区
JavaScript
帖子详情
VML z-index 问题
jonefy
2012-01-04 03:05:45
我试图做一个圆环的效果,将一个<v:oval的圆放置在两个报表中间!
我试图将一个 <v:oval 显示在由 <v:shape 和<v:Rect 生成的饼状报表下
但是我设置z-index 为-1 则在最底下,设置为正数则显示在最上层
望各位不吝赐教!
...全文
116
6
打赏
收藏
VML z-index 问题
我试图做一个圆环的效果,将一个<v:oval的圆放置在两个报表中间! 我试图将一个 <v:oval 显示在由 <v:shape 和<v:Rect 生成的饼状报表下 但是我设置z-index 为-1 则在最底下,设置为正数则显示在最上层 望各位不吝赐教!
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
6 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
d2648189399
2012-11-28
打赏
举报
回复
function SVGRenderer()
{
this.svgRoot = null;
}
SVGRenderer.svgNamespace = 'http://www.w3.org/2000/svg';
SVGRenderer.prototype.init = function(elem)
{
this.container = elem;
this.container.style.MozUserSelect = 'none';
var container_all = document.getElementsByTagName("svg");
if (container_all.length !=0)
{
this.svgRoot = container_all[0];
}
else
{
this.svgRoot = this.container.ownerDocument.createElementNS(SVGRenderer.svgNamespace, "svg");
this.svgRoot.style.position = 'absolute';
this.container.appendChild(this.svgRoot);
}
}
SVGRenderer.prototype.addArrowColor = function(color)
{
var elem = this.container.ownerDocument.getElementById(color);
if(elem)
{
return;
}
var defs = this.container.ownerDocument.createElementNS(SVGRenderer.svgNamespace, "defs");
this.svgRoot.appendChild(defs);
var marker = this.container.ownerDocument.createElementNS(SVGRenderer.svgNamespace, "marker");
marker.setAttributeNS(null, 'id', color);
marker.setAttributeNS(null, 'viewBox', '0 0 30 30');
marker.setAttributeNS(null, 'refX', 0);
marker.setAttributeNS(null, 'refY', "15px");
marker.setAttributeNS(null, 'markerUnits', 'strokeWidth');
marker.setAttributeNS(null, 'markerWidth', "9px");
marker.setAttributeNS(null, 'markerHeight', "30px");
marker.setAttributeNS(null, 'orient',"auto");
defs.appendChild(marker);
var path = this.container.ownerDocument.createElementNS(SVGRenderer.svgNamespace, "path");
path.setAttributeNS(null, 'd',"M 0 0 L 30 15 L 0 30 Z");
path.setAttributeNS(null, 'fill',color);
path.setAttributeNS(null, 'stroke',color);
path.setAttributeNS(null, 'stroke-width',"1px");
marker.appendChild(path);
}
SVGRenderer.prototype.drawArrow = function(left, top, left1, top1,color)
{
top +=9;
this.addArrowColor(color);
var svg;
svg = this.container.ownerDocument.createElementNS(SVGRenderer.svgNamespace, 'line');
svg.style.position = 'absolute';
svg.setAttributeNS(null, 'x1', left + "px");
svg.setAttributeNS(null, 'y1', top + "px");
svg.setAttributeNS(null, 'x2', left1 + "px");
svg.setAttributeNS(null, 'y2', top1 + "px");
svg.setAttributeNS(null, 'stroke', color);
svg.setAttributeNS(null, 'stroke-width', "1px");
svg.setAttributeNS(null, 'fill', color);
svg.setAttributeNS(null, 'marker-end', "url(#"+color+")");
this.svgRoot.appendChild(svg);
return svg;
}
SVGRenderer.prototype.remove = function(shape)
{
shape.parentNode.removeChild(shape);
}
SVGRenderer.prototype.move = function(shape, left, top)
{
if (shape.tagName == 'line')
{
var deltaX = shape.getBBox().width;
var deltaY = shape.getBBox().height;
shape.style.position = 'absolute';
shape.setAttributeNS(null, 'x1', left);
shape.setAttributeNS(null, 'y1', top);
shape.setAttributeNS(null, 'x2', left + deltaX);
shape.setAttributeNS(null, 'y2', top + deltaY);
}
}
function VMLRenderer()
{
}
VMLRenderer.prototype.init = function(elem)
{
this.container = elem;
this.container.style.overflow = 'hidden';
// Add VML includes and namespace
elem.ownerDocument.namespaces.add("v", "urn:schemas-microsoft-com:vml");
var style = elem.ownerDocument.createStyleSheet();
style.addRule('v\\:*', "behavior: url(#default#VML);");
}
VMLRenderer.prototype.drawArrow = function(left,top,left1,top1,color)
{
var line = this.container.ownerDocument.createElement('v:line');
line.style.position = 'absolute';
line.setAttribute('from', left + 'px,' + top + 'px');
line.setAttribute('to', left1 + 'px,' + top1 + 'px');
line.setAttribute('strokecolor',color);
var arrow = this.container.ownerDocument.createElement('v:stroke');
arrow.setAttribute('Endarrow', "Classic");
line.appendChild(arrow);
this.container.appendChild(line);
return line;
}
VMLRenderer.prototype.remove = function(shape)
{
shape.removeNode(true);
}
VMLRenderer.prototype.move = function(shape, left, top)
{
if (shape.tagName == 'line')
{
shape.style.marginLeft = left;
shape.style.marginTop = top;
}
else
{
shape.style.left = left;
shape.style.top = top;
}
}
VMLRenderer.prototype.resize = function(shape, fromX, fromY, toX, toY)
{
var deltaX = toX - fromX;
var deltaY = toY - fromY;
if (shape.tagName == 'line')
{
shape.setAttribute('to', toX + 'px,' + toY + 'px');
}
else
{
if (deltaX < 0)
{
shape.style.left = toX + 'px';
shape.style.width = -deltaX + 'px';
}
else
{
shape.style.width = deltaX + 'px';
}
if (deltaY < 0)
{
shape.style.top = toY + 'px';
shape.style.height = -deltaY + 'px';
}
else
{
shape.style.height = deltaY + 'px';
}
}
}
function FlowGraphic(elem)
{
if(!elem)
{
elem = document.body;
}
ie = navigator.appVersion.match(/MSIE (\d\.\d)/);
opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
if ((!ie) || (opera))
{
this.render = new SVGRenderer();
}
else
{
this.render = new VMLRenderer();
}
this.render.init(elem);
this.container = elem;
}
FlowGraphic.prototype.drawArrow = function(x1,y1,x2,y2,color)
{
color = color||"black";
return this.render.drawArrow(x1,y1,x2,y2,color);
}
FlowGraphic.prototype.drawExceptionLine = function(x1,y1,x2,y2)
{
return this.drawArrow(x1,y1,x2,y2,"red");
}
FlowGraphic.prototype.drawLine = function(x1,y1,x2,y2)
{
return this.drawArrow(x1,y1,x2,y2);
}
d2648189399
2012-11-28
打赏
举报
回复
请问怎么解决让这条线放在图片上啊?
jonefy
2012-01-04
打赏
举报
回复
问题已解决! 我在最上层的饼状报表上加了一个和它样式一样的iframe并且隐藏它!
谢谢MuBeiBei 热心回答! 结贴给分!
MuBeiBei
2012-01-04
打赏
举报
回复
[Quote=引用 2 楼 jonefy 的回复:]
引用 1 楼 mubeibei 的回复:
z-index只对绝对定位管用。
在加上position:absolute;把这两个饼图
设置的都是position:absolute;
[/Quote]
那你就让在上面的数值大一些,下面的用1就行了,别用-1,这样试试~·
jonefy
2012-01-04
打赏
举报
回复
[Quote=引用 1 楼 mubeibei 的回复:]
z-index只对绝对定位管用。
在加上position:absolute;把这两个饼图
[/Quote]
设置的都是position:absolute;
MuBeiBei
2012-01-04
打赏
举报
回复
z-index只对绝对定位管用。
在加上position:absolute;把这两个饼图
易语言源码易语言超级表格自动完成源码
易语言源码易语言超级表格自动完成源码
【Python + 半导体】设备日志自动解析与异常提取工具
本资源提供半导体设备日志自动解析与异常提取的完整解决方案,适用于设备维护、故障诊断、日志审计等场景。
FH8A15G灯串闪灯IC.pdf
FH8A15G灯串闪灯IC
Build PDF translation backend and frontend (3).md
Build PDF translation backend and frontend (3).md
stm32单片机项目资料课程设计文档C语言程序代码原理图电路PCB实例AVR精简学习板DXP资料及其相关资料
stm32单片机项目资料课程设计文档C语言程序代码原理图电路PCB实例AVR精简学习板DXP资料及其相关资料
JavaScript
87,989
社区成员
224,684
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章