用js在svg图上的上动态添加一张任意格式的图片

我想用js在一个指定的svg图上动态的添加一任意格式张图片？有没有哪位大神能够指教一下！！！
能够给出代码最好

解决方案 »

  1.   

    给 svg 添加移除背景就是了   如：   background-image: url('/soma.png');
      

  2.   

    不是那样的哦，回楼上，我要的是在svg图上的某个点上动态创建一张图片，用了很多方法就是获取不到地图的url地址
      

  3.   

    SVG的DOM操作？随便写了个，楼主测试下，应该大丈夫。
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <script type="text/javascript">
      function init()
      {
      var svg_obj = document.getElementById("svg_obj");
      svg_obj.onclick = function(event)
      {
    var xmlns = "http://www.w3.org/2000/svg";  
    var tsvg_obj = document.getElementById("svg_obj");
    var svg_img = document.createElementNS(xmlns,"image");
    svg_img.href.baseVal = "0.png" ;
    svg_img.setAttributeNS(null,"x",event.pageX);
    svg_img.setAttributeNS(null,"y",event.pageY);
    svg_img.setAttributeNS(null,"height","16px");
    svg_img.setAttributeNS(null,"width","16px");
    tsvg_obj.appendChild(svg_img);
      }
      }
      </script>
     </head><body onload="init();">
    <svg id="svg_obj" version="1.1"
    xmlns="http://www.w3.org/2000/svg" style="width:220px;height:220px;border:1px solid black;"></svg>
    </body>
    </html>
      

  4.   

    你可以用个<g>标签把点（<circle>标签之内包裹起来作一个节点）
      

  5.   

    svg_img.href.baseVal = "0.png" ;
    找个图片，重命名为0.png，和网页放在同一目录下。
      

  6.   

    报错是 这句“var svg_img = document.createElementNS(xmlns, "image");”对象不之处此属性或方法
      

  7.   

    不会吧，楼主能把测试页面的全代码黏贴出来么？
    我特意测了下，都没出现楼主的问题。
    FF下亲测无问题CHROME无问题IE无问题
      

  8.   

    ie9以下不能支持SVG吧你用的什么浏览器测的？
      

  9.   

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <script type="text/javascript">
          function init() {
              var svg_obj = document.getElementById("svg_obj");
              svg_obj.onclick = function(event) {
                  var xmlns = "http://www.w3.org/2000/svg";
                  var tsvg_obj = document.getElementById("svg_obj");
                  var svg_img = document.createElementNS(xmlns, "image");
                  svg_img.href.baseVal = "example.jpg";
                  svg_img.setAttributeNS(null, "x", event.pageX);
                  svg_img.setAttributeNS(null, "y", event.pageY);
                  svg_img.setAttributeNS(null, "height", "16px");
                  svg_img.setAttributeNS(null, "width", "16px");
                  tsvg_obj.appendChild(svg_img);
              }
          }
      </script>
     </head>
     
    <body onload="init();">
    <svg id="svg_obj" version="1.1"
    xmlns="http://www.w3.org/2000/svg" style="width:220px;height:220px;border:1px solid black;"></svg>
    </body>
    </html>
      

  10.   

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <script type="text/javascript">
          function init() {
              var svg_obj = document.getElementById("svg_obj");
              svg_obj.onclick = function(event) {
                  var xmlns = "http://www.w3.org/2000/svg";
                  var tsvg_obj = document.getElementById("svg_obj");
                  var svg_img = document.createElementNS(xmlns, "image");
                  svg_img.href.baseVal = "example.jpg";
                  svg_img.setAttributeNS(null, "x", event.pageX);
                  svg_img.setAttributeNS(null, "y", event.pageY);
                  svg_img.setAttributeNS(null, "height", "16px");
                  svg_img.setAttributeNS(null, "width", "16px");
                  tsvg_obj.appendChild(svg_img);
              }
          }
      </script>
     </head>
     
    <body onload="init();">
    <svg id="svg_obj" version="1.1"
    xmlns="http://www.w3.org/2000/svg" style="width:220px;height:220px;border:1px solid black;"></svg>
    </body>
    </html>
      

  11.   

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <script type="text/javascript">
          function init() {
              var svg_obj = document.getElementById("svg_obj");
              svg_obj.onclick = function(event) {
                  var xmlns = "http://www.w3.org/2000/svg";
                  var tsvg_obj = document.getElementById("svg_obj");
                  var svg_img = document.createElementNS(xmlns, "image");
                  svg_img.href.baseVal = "example.jpg";
                  svg_img.setAttributeNS(null, "x", event.pageX);
                  svg_img.setAttributeNS(null, "y", event.pageY);
                  svg_img.setAttributeNS(null, "height", "16px");
                  svg_img.setAttributeNS(null, "width", "16px");
                  tsvg_obj.appendChild(svg_img);
              }
          }
      </script>
     </head>
     
    <body onload="init();">
    <svg id="svg_obj" version="1.1"
    xmlns="http://www.w3.org/2000/svg" style="width:220px;height:220px;border:1px solid black;"></svg>
    </body>
    </html>
    测试了下，没问题。
    参考9L，IE版本<10的都必须安装SVGViewer，且不能在兼容性视图中预览，Chrome&FF最好升到最新版本试试。