zoukankan      html  css  js  c++  java
  • 【转】SVG与HTML、JavaScript的三种调用方式

    原文:https://www.cnblogs.com/guohu/p/5085045.html

    一、在HTMl中访问SVG的DOM

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
     <script language="javascript">
    window.onload = function(){
        //获得SVG文档的DOM结构
         var svgdoc = document.getElementById("id1").getSVGDocument();
    }
     </script>
     </head>
     <body>
     
     <!-- 插入SVG文档 -->
     <embed id="id1" pluginspage="http://www.adobe.com/svg/viewer/install/" src="a.svg" height="200px" width="400px" type="image/svg+xml">
     
    </body>
    </html>

    二、在SVG文档中嵌入JavaScript

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
    <svg xmlns="http://www.w3.org/2000/svg"
    width="3.5in" height="1in">
    <title>Listing 24-1 from the XML Bible</title>
    <script type="text/javascript">
    <![CDATA[
    alert(123);
    ]]>
    </script>
    <circle r="30" cx="34" cy="34"
    style="fill: red; stroke: blue; stroke- 2" />
    </svg>

    三、在SVG文档中链接外部JavaScript

    1
    2
    3
    4
    5
    6
    7
    8
    9
    Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->1 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    width="3.5in" height="1in">
    <title>Listing 24-1 from the XML Bible</title>
    <circle id="x" r="30" cx="34" cy="34"
    style="fill: red; stroke: blue; stroke- 2" />
    <script type="text/javascript" xlink:href="a.js">
    </script>
    </svg>

    注意的是需要添加命名空间xmlns:xlink="http://www.w3.org/1999/xlink",不然解析script节点的xlink:href="a.js"属性会报错

  • 相关阅读:
    [bzoj1731] [Usaco2005 dec]Layout 排队布局
    [bzoj1914] [Usaco2010 OPen]Triangle Counting 数三角形
    [bzoj1774] [Usaco2009 Dec]Toll 过路费
    [bzoj1783] [Usaco2010 Jan]Taking Turns
    [bzoj1705] [Usaco2007 Nov]Telephone Wire 架设电话线
    [bzoj1700]: [Usaco2007 Jan]Problem Solving 解题
    定时启动任务
    数据库表转javaBean
    验证码的生成
    MD5加密与验证
  • 原文地址:https://www.cnblogs.com/zhaiyf/p/8855575.html
Copyright © 2011-2022 走看看