svg data text html,如何使用SVG Text

如何在SVG中使用对话框与用户交互是SVG开发中常见的一个问题，SVG的窗口对象只提供了alert,confirm,prompt窗口方法，如何在SVG中创建和使用其它复杂对话框呢？解决的方法有几种：

1， 使用传统的HTML，其中嵌入SVG对象，使用HTML的窗口对象弹出网页对话框。例如在a.html中:

SVG事件

function changeColor()

{

var SvgMainMapDoc=id1.getSVGDocument();

var obj = new Object();

obj.name="51js";

var ret = window.showModalDialog("c.html",obj,"dialogWidth=300px;dialogHeight=300px");

//alert(ret);

var text1=SvgMainMapDoc.getElementById("text1");

text1.setAttribute("stroke",ret);

}

c.html为要显示的网页对话框，其中也嵌入了SVG对象，这样就可以使用SVG创建对话框界面。在c.html中

查询SVG属性

//var obj = window.dialogArguments;

//alert("您传递的参数为：" + obj.name);

//var svgns = "http://www.w3.org/2000/svg";

var ret = "yellow"; //Default

window.returnValue=ret;

function setColor(evt)

{

var targetshape = evt.getTarget();

ret = targetshape.getAttributeNS(null,"fill");

//alert(ret);

window.returnValue=ret;

var SvgMainMapDoc=id1.getSVGDocument();

var id="text1";

if(SvgMainMapDoc.getElementById( id ).hasChildNodes() == true)

SvgMainMapDoc.getElementById( id ).getFirstChild().setData( ret );

else

{

NewItem = SvgMainMapDoc.createTextNode( ret )

SvgMainMapDoc.getElementById( id ).appendChild(NewItem);

}

self.close()

}

两个页面都嵌入了SVG，而且SVG可以调用这些Script，并传递和返回参数。

效果如下：

按下按钮后显示选择颜色对话框

在选择颜色关闭颜色对话框后，文字颜色变化为选择的颜色：

2， 使用SVG中的超级链接到另外一个SVG页面，但数据交互比较麻烦，一个可行的选择是通过剪贴板传递数据。该方法无法模拟使用模式对话框的情况，用户感觉也比较差，所以不推荐使用。

Back to my blog

3， 使用SVG创建一个模拟的窗口，这种方法需要一些工作量。模拟窗口风格应当与常用的窗口风格相似，包括标题，标题栏，按钮，状态栏。窗口可以移动，包括一些控件。如果更进一步的化，窗口应当可以改变大小，最大化和最小化，以及一些窗口风格。

下面是一个最简单的对话框的窗口，可以移动和关闭，并放置一些按钮等。

代码如下：

Dialog

Model dialog simulation.

var SVGDocument = null;

var SVGRoot = null;

var TrueCoords = null;

var GrabPoint = null;

var caption = null;

var diaglog = null;

var DragTarget = null;

var test = null;

var modelDialog = false;

function Init(evt)

{

SVGDocument = evt.target.ownerDocument;

SVGRoot = SVGDocument.documentElement;

// these svg points hold x and y values...

// very handy, but they do not display on the screen (just so you know)

TrueCoords = SVGRoot.createSVGPoint();

GrabPoint = SVGRoot.createSVGPoint();

//Get elements we need

caption = SVGDocument.getElementById('winCap');

dialog = SVGDocument.getElementById('dialog');

modal = SVGDocument.getElementById('modal');

}

function Grab(evt)

{

// find out which element we moused down on

var targetElement = evt.target;

// Drag on caption

if ( caption == targetElement )

{

DragTarget = dialog;//We want drag whole dialog;

DragTarget.parentNode.appendChild( DragTarget ); //Show dialog

DragTarget.setAttributeNS(null, 'pointer-events', 'none');

var transMatrix = DragTarget.getCTM();

GrabPoint.x = TrueCoords.x - Number(transMatrix.e);

GrabPoint.y = TrueCoords.y - Number(transMatrix.f);

}

}

function Drag(evt)

{

// account for zooming and panning

GetTrueCoords(evt);

// if we don't currently have an element in tow, don't do anything

if (DragTarget)

{

// account for the offset between the element's origin and the

// exact place we grabbed it... this way, the drag will look more natural

var newX = TrueCoords.x - GrabPoint.x;

var newY = TrueCoords.y - GrabPoint.y;

// apply a new tranform translation to the dragged element, to display

// it in its new location

DragTarget.setAttributeNS(null, 'transform', 'translate(' + newX + ',' + newY + ')');

}

}

function Drop(evt)

{

if ( DragTarget )

{

var targetElement = evt.target;

// turn the pointer-events back on, so we can grab this item later

DragTarget.setAttributeNS(null, 'pointer-events', 'all');

// set the global variable to null, so nothing will be dragged until we

// grab the next element

DragTarget = null;

}

}

function GetTrueCoords(evt)

{

// find the current zoom level and pan setting, and adjust the reported

// mouse position accordingly

var newScale = SVGRoot.currentScale;

var translation = SVGRoot.currentTranslate;

TrueCoords.x = (evt.clientX - translation.x)/newScale;

TrueCoords.y = (evt.clientY - translation.y)/newScale;

}

function closeDialog(evt)

{

dialog.setAttributeNS(null, 'display', 'none');

modelDialog = false;

}

function showDialog(evt)

{

if( !modelDialog)

{

modal.setAttributeNS(null, 'transform', 'translate(-200,-200)');

modal.setAttributeNS(null, 'fill-opacity', '0.5');