脚本

最新推荐文章于 2024-08-02 08:29:13 发布

qq_27628085

最新推荐文章于 2024-08-02 08:29:13 发布

阅读量203

点赞数

分类专栏： svg javascript

javascript 同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

svg

3 篇文章 0 订阅

订阅专栏

可以使用evt.preventDefault（）方法覆盖默认浏览器行为，将eventListeners添加到具有语法 element.addEventListener（event，function，useCapture）的对象，并使用语法设置元素属性svgElement.style.setProperty("fill-opacity", "0.0", ""). 注意是否存在所有三个参数设置属性。

链接到“防止事件代码中的默认行为” 部分

在编写拖放代码时，有时您会发现在拖动时会意外选择页面上的文本。或者，如果要在代码中使用退格键，则需要在按下退格键时覆盖浏览器的默认行为，即返回上一页。该evt.preventDefault()方法允许您执行此操作。

链接到使用对象部分`eventListeners`

这些方法addEventListener()和removeEventListener()写作互动SVG时是非常有用的。您可以将实现handleEvent接口的对象作为第二个参数传递给这些方法。

<span style="color:#333333">
<code class="language-html">function myRect(x,y,w,h,message){
this.message=message</code>
</span>

<span style="color:#333333">
<code class="language-html">this.rect=document.createElementNS("http://www.w3.org/2000/svg","rect")
 this.rect.setAttributeNS(null,"x",x)
 this.rect.setAttributeNS(null,"y",y)
 this.rect.setAttributeNS(null,"width",w)
 this.rect.setAttributeNS(null,"height",h)
 document.documentElement.appendChild(this.rect)
</code>
</span>

<span style="color:#333333">
<code class="language-html">this.rect.addEventListener("click",this,false)
</code>
</span>

<span style="color:#333333">
<code class="language-html">this.handleEvent= function(evt){
   switch (evt.type){
    case "click":
     alert(this.message)
     break;
    }
   }
  }
</code>
</span>

链接到文档间脚本：引用嵌入式SVG

在HTML中使用SVG时，Adobe的SVG Viewer 3.0会自动包含一个svgDocument指向SVG文档的窗口属性。对于Mozilla的原生SVG实现，情况并非如此; 因此，使用window.svgDocument在Mozilla中不起作用。相反，你可以使用

<span style="color:#333333">
<code class="language-html">var svgDoc=document.embeds["name_of_svg"].getSVGDocument();</code>
</span>

获取对嵌入式SVG文档的引用。

访问Document表示SVG文档的最佳方法是查看HTMLIFrameElement.contentDocument（如果文档以a表示<iframe>）或HTMLObjectElement.contentDocument（如果文档以<object>元素形式呈现），如下所示：

<span style="color:#333333">
<code class="language-html">
var svgDoc = document.getElementById("iframe_element").contentDocument;
</code>
</span>

此外，<iframe>，<embed>，和<object>元素提供了一个方法，getSVGDocument()，它返回XMLDocument表示该元素的嵌入SVG或null如果元件不表示SVG文档。

您也可以使用，它会产生相同的结果。document.getElementById("svg_elem_name").getSVGDocument()

您可以找到涉及SVGDocument界面的文档。在SVG 2之前，使用该接口表示SVG文档。但是，现在使用XMLDocument界面来表示SVG文档。

链接到文档间脚本：调用JavaScript函数

从嵌入在HTML文档中的SVG文件调用驻留在HTML文件中的JavaScript函数时，应该使用parent.functionname()该函数来引用该函数。尽管Adobe SVG查看器插件允许使用functionname()，但它并不是首选的方法。

根据SVG wiki，"parent"JS变量在Adobe的SVG版本6预览插件中被破坏。建议的解决方法是使用"top"而不是"parent"。由于它是其插件的测试版，我们可以安全地忽略它。

可以在SVG wiki文档间脚本页面上找到更多信息和一些示例。

链接到部分`setProperty`有三个参数

该函数svgElement.style.setProperty("fill-opacity", "0.0")抛出一个DOMException - SYNTAX ERR在Mozilla中。此行为由DOM Level 2样式规范中的W3C指定。该函数setProperty定义为具有三个参数的函数。以上可以替换'svgElement.style.setProperty("fill-opacity", "0.0", "")'为符合标准的。