javascript - learning - svg string




有沒有可能使用JavaScript處理嵌入在HTML文檔中的SVG文檔? (5)

我做了一個SVG圖像,或更像迷你應用程序,查看數據圖形。 我想把它包含在HTML頁面中,並調用SVG圖像上的方法。

例:

<object id="img" data="image.svg" width="500" height="300"/>
<script>document.getElementById("img").addData([1,23,4]);</script>

是否可以在SVG文檔上調用方法? 如果是這樣,我該如何聲明在SVG文件中公開的方法,以及如何從HTML文檔中調用它們?


事情實際上比你期望的要簡單。 您並不需要閱讀令人費解的教程來理解概念,您也不需要使用JQuery。 這裡是基本的佈局:

  • 您的html文檔中的JavaScript函數。

    <script type="text/javascript">
    function change(){
        var s=document.getElementById("cube");
        s.setAttribute("stroke","0000FF");
    }
    </script>
  • 我們試圖操作的SVG元素。

    <svg width=100 height=100 style='float: left;'>
      <rect x="10" y="10" width="60" height="60" id="cube" onclick="change()" stroke=#F53F0C stroke-width=10 fill=#F5C60C />
    </svg>
  • 內聯按鈕,將觸發更改。 注意,在我的例子中,事件也可以通過點擊多維數據集本身來觸發。

    <button onclick="change()">Click</button>




解:

在svg:

<script>document.method = function() {}</script>

在HTML(使用原型添加事件監聽器):

<script>$("img").observe("load", function() {$("img").contentDocument.method()});

您需要聆聽圖像上的加載事件。 加載圖像後,可以使用element.contentDocument訪問svg文檔上的文檔變量。 任何方法添加到,將可用。





svg