为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用SVG Text

/ 猿问

如何使用SVG Text

ABOUTYOU 2019-03-13 09:09:12

如何使用SVG Text


查看完整描述

2 回答

?
临摹微笑

如何在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');



查看完整回答
反对 2019-03-18
?
慕斯王

在处理SVG文本时,不要局限于 x 和 y 属性。 <text> 元素还有几个可以添加的属性,现在我们开始讨论吧。
dx 和 dy 属性
我们从 dx 和 dy 属性开始讲,和 x 和 y 类似,除了它们的值表示的是相对于前一个字符的长度,而不是相对于整个视窗的绝对定位
和 x 、 y 一样, dx 和 dy 接受一列长度值。
我们还是用上周的示例,然后把值赋给 dx 和 dy 。
<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">
<text x="0" y="0" dx="10,20,30,40,60" dy="10,20,30,40,50,60">This is some SVG Text</text>
</svg>

这里我把 x 和 y 的值都设置为 0 ,然后 dx 和 dy 设置一列长度值。注意到随着长度值的增长,下一个字符的距离也在增长。如果想要在字符间保持相同的间距,你需要给 dx 和 dy 设置相同的值。
This is some SVG Text
一件你可能没注意到的事是上面列表中字符之间的长度和间距,好像有点不太对。如果你测量了每个字符的长度,你期望中的 i 和 s 之间的间距应该是 60px ,这是最后一个值设置的。
但是它没有这样显示的原因是, 60px 拉开的是从“is”中的 i 到“this”和“is”之间的space[空格] 之间的间距。间隔是按照字符(空格也是字符)来算的。
旋转SVG字符
你还可以使用 rotate 属性来旋转字符,它接受一列值。每个数字又代表一个特定的字符。
<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">
<text x="0" y="20" rotate="0,45,0,90,180,0">This is some SVG Text</text>
</svg>

这里我把 x 设置为 0 , y 为 20 ,给 rotate 属性设置了一列值。字符 T 旋转 0deg , H 旋转 45deg ,以此类推。直到这列值结束,所有剩下的字符都会保持旋转 0deg 。



查看完整回答
反对 2019-03-18

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信