如何在SVG中使用对话框
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在SVG中使用对话框相关的知识，希望对你有一定的参考价值。
参考技术A 如何在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 xlink:href="b.svg">
<rect fill="black" pointer-events="all" x="60" y="930" width="280" height="40"/>
<text x="70" y="965" font-size="36" stroke="none" fill="white" text-decoration="underline">Back to my blog</text>
</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');本回答被提问者和网友采纳
如何在 Flutter SDK 中使用 SVG 或 Vector Drawable
【中文标题】如何在 Flutter SDK 中使用 SVG 或 Vector Drawable【英文标题】：How to Use SVG or Vector Drawables in Flutter SDK 【发布时间】：2019-09-17 04:57:02 【问题描述】：我想在我的 Flutter 应用程序中使用 SVG/矢量图形。 有没有可以使用的库或 Dart 包？
【问题讨论】：
【参考方案1】：在 Flutter 中显示来自 Assets 的 SVG。
-
在依赖项下的pubspec.yaml文件中添加以下代码
flutter_svg: ^0.22.0
在 main.dart 的标头中添加以下代码
import 'package:flutter_svg/flutter_svg.dart';
将 SVG 分配给一个变量，例如 final String assetName = 'assets/images/avatar.svg';
new SvgPicture.Asset(assetName, height:100, width:100,)
【讨论】：
遗憾的是，flutter_svg 极其有限。大多数开箱即用的 SVG 实际上都不起作用。【参考方案2】：步骤
-
使用这个插件flutter_svg
https://pub.dartlang.org/packages/flutter_svg
向资产添加图片
导入并添加这个小部件
SvgPicture.asset('assets/images/Defect/icon$values[index].childId.svg', height: 50.0,),
【讨论】：
RR：当前 Flutter SDK 版本为 1.17.3。因为flutter_svg需要Flutter SDK版本>=1.18.0-6.0.pre 要使用这个库，请从 Flutter 稳定通道更改为 Flutter beta 通道。运行：“flutter channel beta”和“flutter upgrade”。以上是关于如何在SVG中使用对话框的主要内容，如果未能解决你的问题，请参考以下文章