如何在SVG中使用对话框

最新推荐文章于 2025-07-12 09:09:00 发布

原创最新推荐文章于 2025-07-12 09:09:00 发布 · 5.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#null #dialog #button #html #javascript #脚本

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

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

< html >< head >< title > SVG事件 </ title >

< body >

< script language = " JavaScript " >

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);

}

</ script >

< embed name = " id1 " pluginspage = " http://www.adobe.com/svg/viewer/install/ " align = " top " src = " 1.svg " height = " 200px " width = " 400px " type = " image/svg+xml " >

< input type = " button " value = " selectColor " name = " color " onclick = " changeColor() " >

</ body >

</ html >

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

< html >< head >< title > 查询SVG属性 </ title >

< body >

< script language = " JavaScript " >

// 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()

}

</ script >

< embed name = " id1 " pluginspage = " http://www.adobe.com/svg/viewer/install/ " align = " top " src = " 3.svg " height = " 200px " width = " 400px " type = " image/svg+xml " >

</ body >

</ html >

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

效果如下：

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

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

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

</a>

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

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

代码如下：

< svg width = " 100% " height = " 100% " xmlns = " http://www.w3.org/2000/svg " onload = " Init(evt) " onmousedown = " Grab(evt) " onmousemove = " Drag(evt) " onmouseup = " Drop(evt) " >

< title > Dialog </ title >

< desc >

Model dialog simulation.

</ desc >

< script type = " text/javascript " ><! [CDATA[

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');

dialog.setAttributeNS(null, 'transform', 'translate(200,200)');

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

SVGRoot.appendChild( dialog );

modelDialog = true;

//alert("ok");

}

]] ></ script >

< def >

< linearGradient id = " linear1 " >

< stop offset = " 0% " stop - color = " navy " />

< stop offset = " 100% " stop - color = " blue " />

</ linearGradient >

</ def >

< rect id = ' BackDrop ' x = ' -10% ' y = ' -10% ' width = ' 110% ' height = ' 110% ' fill = ' none ' pointer - events = ' all ' />

< g id = " dialog " x = " 100 " y = " 100 " display = " none " >

< rect id = " modal " width = " 110% " height = ' 110% ' fill = " white " fill - opacity = " 0 " />

< rect id = " winBody " width = " 200 " height = ' 150 ' stroke - width = " 2 " stroke = " gray " fill = " white " />

< g >

< rect id = " winCap " width = " 200 " height = " 14 " stroke - width = " 2 " stroke = " gray " fill = " url(#linear1) " />

< text pointer - events = " none " transform = " translate(0,10) " stroke = " white " > dialog </ text >

</ g >

< g id = " close " onclick = " closeDialog(evt) " >

< a >

< rect transform = " translate(189,1) " width = " 10 " height = ' 10 ' stroke = " white " fill = " red " />

< g transform = " translate(191,2) " >

< line x1 = " 0 " y1 = " 0 " x2 = " 7 " y2 = " 7 " stroke - width = " 2 " stroke = " white " />

< line x1 = " 0 " y1 = " 7 " x2 = " 7 " y2 = " 0 " stroke - width = " 2 " stroke = " white " />

</ g >

</ a >

</ g >

< rect id = " button " onclick = " showDialog(evt) " x = " 100 " y = " 100 " width = " 60 " height = ' 30 ' stroke - width = " 2 " stroke = " black " fill = " gray " />

< circle cx = " 250 " cy = " 250 " r = " 1 " >

< animate attributeName = " r " from = " 1 " to = " 50 " dur = " 5s "

repeatCount = " indefinite " />

</ circle >

</ svg >

4，使用SVG窗口类

http://www.carto.net 提供了一个交互窗口的脚本，可以生成SVG模拟窗口，我们只需要引入几个必要的脚本，就可以使用该窗口了，窗口除了提供上面描述的界面，还支持窗口消息回调函数，以建立复杂的基于SVG的WEB应用程序。具体的描述和下载地址为 http://www.carto.net/papers/svg/gui/Window/。此外该网站还有很多SVG的控件脚本，例如按钮，列表框等，很多有用的资源。下面是一个使用该窗口脚本的最简单的例子。

<? xml version = " 1.0 " standalone = " no " ?>

<! DOCTYPE svg PUBLIC " -//W3C//DTD SVG 1.1//EN "

" http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd " >

<? AdobeSVGViewer save = " snapshot " ?>

< svg width = " 100% " height = " 100% " viewBox = " 0 0 1024 700 " onload = " init(evt) "

xmlns:batik = " http://xml.apache.org/batik/ext "

xmlns:attrib = " http://www.carto.net/attrib "

xmlns:xlink = " http://www.w3.org/1999/xlink "

xmlns = " http://www.w3.org/2000/svg "

preserveAspectRatio = " xMidYMid meet "

zoomAndPan = " magnify " >

< script type = " text/ecmascript " xlink:href = " helper_functions.js " />

< script type = " text/ecmascript " xlink:href = " mapApp.js " />

< script type = " text/ecmascript " xlink:href = " timer.js " />

< script type = " text/ecmascript " xlink:href = " Window.js " />

< script type = " text/ecmascript " ><! [CDATA[

// global variables for map application and navigation

var myMapApp = new mapApp();

function init(evt) {

//start a new window array in myMapApp

myMapApp.Windows = new Array();

//first a few styles

var winPlaceholderStyles = {"fill":"none","stroke":"dimgray","stroke-width":1.5};

var windowStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1};

var titlebarStyles = {"fill":"gainsboro","stroke":"dimgray","stroke-width":1};

var statusbarStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1};

var titletextStyles = {"font-family":"Arial,Helvetica","font-size":14,"fill":"dimgray"};

var statustextStyles = {"font-family":"Arial,Helvetica","font-size":10,"fill":"dimgray"};

var buttonStyles = {"fill":"none","stroke":"dimgray","stroke-width":1};

var titlebarHeight = 25;

var statusbarHeight = 13;

//create new window instance and add it to the Windows array with the windowId as a key

myMapApp.Windows["bigWindow"] = new Window("bigWindow","Windows",

700,500,50,150,true,0,80,1024,700,true,

winPlaceholderStyles,windowStyles,3,true,true,

"Big Window","This is a big movable window",true,true,true,

titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,

titletextStyles,statustextStyles,buttonStyles,undefined);

myMapApp.Windows["smallWindow"] = new Window("smallWindow","bigWindow",

200,180,350,300,true,0,17,700,487,true,

winPlaceholderStyles,windowStyles,3,true,true,

"Small Window","Callback function is active",true,false,false,

titlebarStyles,titlebarHeight,statusbarStyles,statusbarHeight,

titletextStyles,statustextStyles,buttonStyles,windowEvents);

myMapApp.Windows["bigWindow"].appendContent("button",true);

myMapApp.Windows["smallWindow"].appendContent("animate",true);

}

function windowEvents(id,evtType)

{

}

function openCloseWindow(id) {

if (myMapApp.Windows[id].closed) {

myMapApp.Windows[id].open(true);

}

else {

myMapApp.Windows[id].close(true);

}

]] ></ script >

< rect id = " button " onclick = " openCloseWindow('smallWindow') " x = " 100 " y = " 100 " width = " 60 " height = ' 30 ' stroke - width = " 2 " stroke = " black " fill = " gray " />