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

    一、在HTMl中访问SVG的DOM:

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

    二、在SVG文档中嵌入JavaScript:

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

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

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

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

  • 相关阅读:
    安装开发工具
    CSS基础
    CSS动画
    CSS效果
    CSS布局
    CSS预处理语言
    React开发笔记
    Vue2.0学习笔记
    Vue-cli3.0开发笔记
    项目开发技巧
  • 原文地址:https://www.cnblogs.com/netWild/p/1895521.html
Copyright © 2011-2022 走看看