什么时候才能把握最真的东西呢?
- 华龙专业制作证件集团(中国)有限公司... 王先生
- 西湖之声;在记忆中的是东方月的《星夜... 坚持是一种美
- 这个好笑,我转下啊,哈哈哈哈... 生姜
- 也许吧.人就是那样过去的? 就像我... 我爱四川
- 平常一点对待就好了阿。大学总是要出去... momo
- 大四的第一个周末, 有些茫然, ... helen
- 等空间开了再做了更漂亮的。... momo
- 很欣赏你的话题,同感.... mengying
- 收下这个歌了袄.~^^... 7宝
- 现在竟然是健康节目。。。尴尬~~~... moluobuzai
- <P>我没好好玩.只是会去.</P>... 7宝
- <P>看你从哪个角度来看了</P>... yongzhi
- <P>日本人的政治道德和足球道德都有... 253856682
- <P>沙发啊...今天是母亲节了,等... helen
- <P><FONT color=#99... helen
^_^没没^_^ @ 2006-5-13 13:02
示例:
<g onclick="operate_Dom()" id="g5" transform="translate(0 80)">
<text id="txt1" x="6px" y="30px" style="font-size:15">operate DOM</text>
<text id="txt2" x="6px" y="50px" style="font-size:15">operate DOM</text>
</g>
<!-内嵌脚本代码'
<script language="javascript"><![CDATA[
function operate_Dom(){
//通过document环境变量获取id值为"g5"的节点
var g5=document.getElementById("g5");
//将g5节点下所有text节点删除
var txts=g5.getElementsByTagName("text");
for(var i=txts.length-1;i>=0;i--){
g5.removeChild(txts.item(i));
}
//将g5节点的onclick事件删除
g5.removeAttribute("onclick");
//创造一个文本节点对象
var text = document.createElement ("text");
text.setAttribute("x", 100);
text.setAttribute("y", 100);
//将文本内容添加到text节点对象中
text.appendChild(document.createTextNode("new text"));
//创造一个链接节点,注意在这里给设置节点和属性时必须指定命名空间
var a=document.createElementNS("http://www.w3.org/2000/svg","a");
a.setAttributeNS(
"http://www.w3.org/2000/xlink/namespace/",
"xlink:href",
"http://www.sina.com");
//将text节点添加到链接节点中
a.appendChild(text);
//将链接节点添加到g5节点中
g5.appendChild(a);
//获取视图范围
var bBox=(document.getDocumentElement().getBBox());
//创建一个矩形节点
var shape = document.createElement("rect ");
//配置属性
shape.setAttribute("x", bBox.x);
shape.setAttribute("y", bBox.y);
shape.setAttribute("width", bBox.width);
shape.setAttribute("height", bBox.height);
shape.setAttribute("style", "fill: #eeeeee");
shape.getStyle().setProperty("stroke","red");
shape.getStyle().setProperty("stroke-width","1");
//将矩形节点添加到SVG根节点子节点队列的最前边
document.getDocumentElement().insertBefore(shape,document.getDocumentElement().firstChild);
}
]]>
</script>
附:DOM,不过是法文的-_-! 大概能看得懂。
Javascript, SVG et DOM
Mettre un script dans un fichier SVG
|
La balise <script> dans le fichier SVG |
L'appel à un fichier javascript externe |
Fonctions, variables et méthodes gérées par Adobe Viewer
| Nom | type | paramètres | description | exemple |
| evt | variable | aucun | variable renvoyée quand le dessin SVG a le focus | <svg width="400" height="200" onload="fonction(evt)"> Exemple1 |
| ownerDocument getOwnerDocument() |
fonction | aucun | renvoie le document SVG | svgdoc = evt.target.ownerDocument Exemple2 |
| target getTarget() |
fonction | aucun | renvoie l'objet qui a le focus | objet = evt.target Exemple1 |
| getElementById("rectangle") | fonction | identificateur de l'objet | renvoie l'objet qui a pour "id" la valeur envoyée | objet= svgdoc.getElementById("rectangle") Exemple2 |
| getAttribute("id") | fonction | nom d'un attribut de l'objet SVG | renvoie la valeur de l'attribut | largeur=objet.getAttribute("width") Exemple2 |
| setAttribute("id",valeur) | méthode | nom d'un attribut et la valeur envoyée | affecte à un attribut la valeur envoyée | objet.setAttribute("width",300) Exemple2 ( pour xlink:href utilisez setAttributeNS ) |
| setAttributeNS("...","xlink:href",lien) | méthode | adresse NS, attribut et valeur | affecte à un attribut la valeur envoyée | objet.setAttributeNS("...","xlink:href",truc.htm) Exemple18 |
| style getStyle() |
fonction | aucun | renvoie le style d'un objet | aspect=objet.style Exemple2 |
| setProperty("fill",valeur) | méthode | le nom de la propriété et la valeur envoyée | affecte la valeur à une propriété | objet.getStyle().setProperty("fill","red") Exemple2 |
| getPropertyValue("fill") | fonction | le nom de la propriété | renvoie la valeur de la propriété | couleur=objet.getStyle().getPropertyValue("fill") Exemple10 |
| attributes | fonction | aucun | renvoie les attributs de l'objet comme NamedNodeMap | att=objet.attributes att.length donne le nombre d'attributs att.item(i) donne le ième attribut att.item(i).name son nom att.item(i).value sa valeur Exemple17 |
| createElement("rect") | fonction | le type de l'objet créé | crée un objet | nouveau=svgdoc.createElement("rect") Exemple1 Exemple8 |
| appendChild(nouveau) | méthode | nom de l'objet créé | insère l'objet créé comme descendant d'un noeud | node.appendChild(nouveau) Exemple1 Exemple8 |
| replaceChild(nouveau,ancien) | méthode | objets | remplace ancien par nouveau | node.replaceChild(nouveau,ancien) Exemple15 |
| insertBefore(nouveau,place) | méthode | objets | insère nouveau avant l'objet place | node.insertBefore(nouveau,place) Exemple16 |
| createTextNode("tra la") | fonction | texte à afficher | crée un noeud qui contient le texte à afficher comme descendant d'un noeud de type "text" | texte=svgdoc.createTextNode("tra la"); Exemple4 |
| setData("tra la") | méthode | texte à afficher | Envoie le texte à un noeud descendant d'un noeud "text" | objet.setData("Tra la la") Exemple5 |
| firstChild getFirstChild() |
fonction | aucun | renvoie le premier descendant d'un noeud | texte=objet.firstChild Exemple5 |
| addEventListener ("mousemove",fonction,false) | méthode | événement , fonction appelée, false | crée un événement pour un objet | objet.addEventListener ("mousemove",alerte,false) Exemple1 Exemple8 |
| removeChild(ancien) | méthode | nom d'un objet | détruit l'objet comme descendant du noeud | node.removeChild(ancien) Exemple8 |
| cloneNode(true) | fonction | false ou true | crée un clone de objet et de ses descendants avec true | nouveau=objet.cloneNode(true) Exemple3 |
| getCharCode() | fonction | aucun | renvoie le code de la touche pressée | key=evt.getCharCode() Exemple5 |
| String.fromCharCode(key) | fonction | Code de la touche | renvoie la valeur chaîne de la touche | lettre = String.fromCharCode(key) Exemple5 |
| clientX getClientX() |
fonction | aucun | renvoie l'abscisse du pointeur dans le repère SVG | x_mouse=evt.clientX Exemple6 Exemple19 |
| clientY getClientY() |
fonction | aucun | renvoie l'ordonnée du pointeur dans le repère SVG | y_mouse=evt.clientY Exemple6 Exemple19 |
| screenX getScreenX() |
fonction | aucun | renvoie l'abscisse du pointeur dans le repère HTML | x_mouse=evt.screenX Exemple6 |
| screenY getScreenY() |
fonction | aucun | renvoie l'ordonnée du pointeur dans le repère HTML | y_mouse=evt.screenY Exemple6 |
| childNodes getChilNodes() |
fonction | aucun | renvoie les descendants du noeud dans une liste y compris les CR !.... | groupe=node.childNodes Exemple7 |
| getElementsByTagName(tag) | fonction | Le type recherché "*" est le joker |
renvoie les descendants du type indiqué dans une liste | groupe=node.getElementsByTagName('rect') Exemple9 |
| length getLenght() |
fonction | aucun | donne la longueur d'un objet NodeList | nombre=groupe.lenght Exemple7 Exemple9 |
| item(n) | fonction | nombre entier >=0 | renvoie le nième objet de la liste | objet=groupe.item(1) Exemple7 Exemple9 |
| nodeType | fonction | aucun | renvoie le type du noeud sous forme d'un entier | i=objet.nodeType Exemple10 |
| nodeName | fonction | aucun | renvoie le nom du tag | nom=objet.nodeName Exemple10 |
| getCharNumAtPosition(d) | fonction | SVGPoint | renvoie l'indice du caractère à la position indiquée | indice=objet.getCharNumAtPosition(d) Exemple11 |
| getExtentOfChar(i) | fonction | Entier positif ou nul | renvoie le rectangle entourant la lettre comme SVGRect | trace=objet.getExtentOfChar(5); trace.x, trace.y, trace.width et trace.height Exemple11 |
| getStartPositionOfChar(i) getEndPositionOfChar(i) |
fonction | Entier positif ou nul | renvoie le point de départ du tracé de la lettre comme SVGPoint | p=objet.getStartPositionOfChar(1); p.x et p.y donnent les coordonnées Exemple11 |
| getNumberOfChars() | fonction | aucun | renvoie le nombre de lettres, y compris les espaces | longueur=objet.getNumberOfChars() Exemple12 |
| getComputedTextLength() | fonction | aucun | renvoie la longueur en points pour tracer la chaîne | occupe=objet.getComputedTextLength() Exemple12 |
| selectSubString(i,j) | méthode | indice de départ et longueur de la sous-chaîne | sélectionne la sous-chaîne | objet.selectSubString(0,2) Exemple12 |
| getBBox() | fonction | aucun | renvoie le rectangle entourant l'objet comme SVGRect | trace=objet.getBBox(); trace.x, trace.y, trace.width et trace.height Exemple13 |
| getCTM() | fonction | aucun | retourne la matrice de la transformation | matrice=objet.getCTM(); matrice.a,matrice.b ..... matrice.f sont définis Exemple14 |
| inverse | fonction | aucun | retourne la matrice inverse | inverse_matrice=matrice.inverse Exemple14 |
| multiply(matrice2) | fonction | matrice | multiplie par matrice2 | produit=matrice1.multiply(matrice2) Exemple14 |
| currentScale | nombre | aucun | renvoie ou force le facteur de Zoom | currentScale=2 Exemple19 |
| currentTranslate | SVGPoint | aucun | renvoie ou force le facteur de Pan | currentTranslate.x=100 Exemple19 |
-----helen(访客)[ Guest ] @ 2006-5-14 18:08
总算看完了,嘿嘿!!!不过,还是不明白,高深...
-----






