脚本<路径>SVG 中的数据(读取和修改) [英] Scripting <path> data in SVG (reading and modifying)
问题描述
真的有人能帮我吗?我一直在寻找为我的 SVG 运行脚本的方法.但是我得到的所有东西都不匹配!它没有包含足够的信息,为什么他使用这组代码.例如,一个使用 event.target,另一个使用 event.getTarget(),另一个使用 event.target.firstchild.data.有谁能帮帮我吗?
Can anyone really really help me, please? I've been searching for ways to run scripts for my SVG. But all the things i got doesn't match up! And it doesn't contain enough information why he used that set of codes. For example, one used event.target, another had event.getTarget(), and another had event.target.firstchild.data. Can anyone help me, please?
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
是路径 svg 的一个例子吧?我需要的是获取这些坐标,可能将其放入一个变量中,并将其用作另一个 svg 的坐标.那我该怎么做呢?另一件事是如何通过在界面中输入数字来更改这些坐标.
is an example of a path svg right? What i need is to get those coordinates, probably put it in a variable, and use it as coordinates for another svg. So how can i do that? Another thing is how can i change those coordinates by entering numbers in an interface.
所以我试图寻找答案,但就像我说的,我没有找到我需要的信息,或者我只是不明白它向我展示了什么.
So i tried to look for answers, but like i said, i didn't find the info i needed or maybe i just didn't i understand what it showed me.
推荐答案
听起来您可能有四个问题:
It sounds like you may have four questions:
- 如何在 SVG 文件中嵌入脚本?
- 如何在 SVG 文件中运行脚本?
- 如何从脚本访问
元素的数据? - 如何操作脚本中
元素的数据?
- How do I embed script inside an SVG file?
- How do I run script inside an SVG file?
- How do I access data for a
<path>
element from script? - How can I manipulate data for a
<path>
element from script?
让我们一次解决一个问题:
Let's tackle them one at a time:
如SVG 规范中所述,您可以将 元素在您的文档中包含 JavaScript 代码.根据最新的 SVG 规范,您不需要指定
type
属性 用于您的脚本.它将默认为 type="application/ecmascript"
.
As described in the SVG specification you can place a <script>
element in your document to contain JavaScript code. According to the latest SVG specifications, you do not need to specify a type
attribute for your script. It will default to type="application/ecmascript"
.
- 其他常见的 mime 类型包括
"text/javascript"
、"text/ecmascript"
(在 SVG 1.1 中指定)、"application/javascript"
和"application/x-javascript"
.我没有关于浏览器支持所有这些的详细信息,或者完全省略type
属性.我在text/javascript
方面一直很成功.
- Other common mime types include
"text/javascript"
,"text/ecmascript"
(specified in SVG 1.1),"application/javascript"
, and"application/x-javascript"
. I do not have detailed information on browser support for all of these, or for omitting thetype
attribute altogether. I have always had good success withtext/javascript
.
与 HTML 一样,您可以将脚本代码直接放在文档中,也可以引用外部文件.执行后者时,您必须为 URI 使用 href
属性(而不是 src
),该属性在 xlink
命名空间中.>
As with HTML, you may either put the script code directly in the document, or you may reference an external file. When doing the latter, you must use an href
attribute (not src
) for the URI, with the attribute in the xlink
namespace.
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script xlink:href="/js/mycode.js" />
<script><![CDATA[
// Wrap the script in CDATA since SVG is XML and you want to be able to write
// for (var i=0; i<10; ++i )
// instead of having to write
// for (var i=0; i<10; ++i )
]]></script>
</svg>
<小时>
如何在 SVG 文件中运行脚本?
与 HTML 一样,SVG 文档中包含的代码将在遇到时立即运行.如果您将 元素放在文档的其余部分上方(就像将
放在
代码> HTML 文档),那么当您的代码运行时,您的所有文档元素都将不可用.
How do I run script inside an SVG file?
As with HTML, code included in your SVG document will be run as soon as it is encountered. If you place your <script>
element above the rest of your document (as you might when putting <script>
in the <head>
of an HTML document) then none of your document elements will be available when your code is running.
避免这种情况的最简单方法是将 元素放在文档底部:
The simplest way to avoid this is to place your <script>
elements at the bottom of your document:
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- all SVG content here, above the script -->
<script><![CDATA[
// Now I can access the full DOM of my document
]]></script>
</svg>
或者,您可以在文档顶部创建一个回调函数,该函数仅在文档的其余部分准备就绪时调用:
Alternatively, you can create a callback function at the top of your document that is only invoked when the rest of the document is ready:
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<title>SVG Coordinates for Embedded XHTML Elements</title>
<script>document.documentElement.addEventListener('load',function(){
// This code runs once the 'onload' event fires on the root SVG element
console.log( document.getElementById('foo') );
},false)</script>
<path id="foo" d="M0 0" />
</svg>
<小时>
如何从脚本访问
元素的数据?
有两种方法可以访问关于 SVG 中元素的大部分信息:您可以通过标准的 DOM Level 1 Core 方法将属性作为字符串访问 getAttribute()
,或者你可以使用SVG DOM 对象和方法.让我们看看两者:
How do I access data for a <path>
element from script?
There are two ways to access most information about elements in SVG: you can either access the attribute as a string through the standard DOM Level 1 Core method getAttribute()
, or you can use the SVG DOM objects and methods. Let's look at both:
使用 getAttribute()
返回与查看源代码时看到的相同的字符串:
Using getAttribute()
returns the same string as you would see when you view source:
<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
var path = document.getElementById('foo');
var data = path.getAttribute('d');
console.log(data);
//-> "M150 0 L75 200 L225 200 Z"
]]></script>
- 优点:调用非常简单;您不必了解 SVG DOM
- 缺点:因为你得到一个字符串,你必须自己解析属性;对于 SVG
数据,这可能会令人难以忍受. - Pros: very simple to call; you don't have to know anything about the SVG DOM
- Con: since you get back a string you have to parse the attribute yourself; for SVG
<path>
data, this can be excruciating.
<path id="foo" d="M150 0 L75 200 L225 200 Z" />
<script><![CDATA[
var path = document.getElementById('foo');
// http://www.w3.org/TR/SVG/paths.html#__svg__SVGAnimatedPathData__normalizedPathSegList
// See also path.pathSegList and path.animatedPathSegList and path.animatedNormalizedPathSegList
var segments = path.normalizedPathSegList ;
for (var i=0,len=segments.numberOfItems;i<len;++i){
var pathSeg = segments.getItem(i);
// http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg
switch(pathSeg.pathSegType){
case SVGPathSeg.PATHSEG_MOVETO_ABS:
// http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegMovetoAbs
console.log("Move to",pathSeg.x,pathSeg.y);
break;
case SVGPathSeg.PATHSEG_LINETO_ABS:
// http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegLinetoAbs
console.log("Line to",pathSeg.x,pathSeg.y);
break;
case SVGPathSeg.PATHSEG_CLOSEPATH:
// http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegClosePath
console.log("Close Path");
break;
}
}
]]></script>
上述脚本产生以下输出:
The above script produces the following output:
Move to 150 0
Line to 75 200
Line to 225 200
Close Path
优点:为您解析路径数据;您可以从 API 本身获得确切的数字;使用
normalizedPathSegList
获取相对命令并使它们对你来说是绝对的;如果 SMIL 动画正在更改路径数据,则使用非动画 pathSegList 可以让您访问通过getAttribute()
无法获得的基本非动画信息.Pros: path data is parsed for you; you get exact numbers from the API itself; using
normalizedPathSegList
takes relative commands and makes them absolute for you; if SMIL animation is changing the path data, using the non-animated pathSegList can give you access to the base, non-animated information not available viagetAttribute()
.缺点:可爱的黑猩猩着火了,看看那个代码!这甚至无法处理所有可能的可用路径段.
Cons: Sweet chimpunks a-flame, look at that code! And that doesn't even handle all the possible path segments available.
因为很难阅读 SVG DOM 的 W3C 规范,所以多年前我创建了一个在线工具来浏览存在哪些属性和对象.您可以在此处使用它:http://objjob.phrogz.net/svg/hierarchy
Because it can be hard to read the W3C specs for SVG DOM, many years ago I created an online tool for browsing what properties and objects exist. You may use it here: http://objjob.phrogz.net/svg/hierarchy
元素的数据
与上面类似,您可以创建一个新字符串并使用
setAttribute()
将其推送到对象上,也可以操作 SVG DOM.Similar to the above, you can either create a new string and use
setAttribute()
to shove it onto the object, or you can manipulate the SVG DOM.<path id="foo" d="M150 0 L75 200 L225 200 Z" /> <script><![CDATA[ var path = document.getElementById('foo'); path.setAttribute('d','M150,0 L150,100 200,300 Z'); ]]></script>
使用 SVG DOM 操作路径数据
<path id="foo" d="M150,0 L75,200 l150,0 Z" /> <script><![CDATA[ var path = document.getElementById('foo'); var segments = path.pathSegList; segments.getItem(2).y = -10; ]]></script>
一般来说,你只需要修改各种
SVGPathSeg
子类实例的属性;更改会立即在 DOM 中进行.(在上面的例子中,原始三角形随着最后一点稍微向上移动而倾斜.)In general, you just have to modify the properties of the various
SVGPathSeg
subclass instances; the changes are made immediately in the DOM. (With the above example, the original triangle is skewed as the last point is moved up slightly.)当你需要创建新的路径段时,你需要使用像
var newSegment =myPath.createSVGPathSegArcAbs(100,200,10,10,Math.PI/2,true,false)
然后使用其中一种方法将该段粘贴到列表中,例如segments.appendItem(newSegment)
.When you need to create new path segments, you need to use methods like
var newSegment = myPath.createSVGPathSegArcAbs(100,200,10,10,Math.PI/2,true,false)
and then use one of the methods to stick this segment into the list, e.g.segments.appendItem(newSegment)
.这篇关于脚本<路径>SVG 中的数据(读取和修改)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!