如何打印javascript生成的svg代码?

时间:2018-01-15 12:56:36

标签: javascript svg

我有一个javascript函数,可以在HTML页面的主体中创建一个svg。 除了创建网页之外,我想提取由javascript(<svg>..</svg>之间的那个)生成的svg代码,并将其打印在文件中以便在其他文档中过去。

例如以下html:

<html>
<head>
  <script>
    function CreateSVG () {
      var xmlns = "http://www.w3.org/2000/svg";
      var boxWidth = 300;
      var boxHeight = 300;
      var svgElem = document.createElementNS (xmlns, "svg");
      svgElem.setAttributeNS (null, "width", boxWidth);

      var g = document.createElementNS (xmlns, "g");
      svgElem.appendChild (g);
      g.setAttributeNS (null, 'transform', 'matrix(1,0,0,-1,0,300)');

      // draw borders
      var coords = "M 0, 0";
      coords += " l 0, 300";
      coords += " l 300, 0";
      coords += " l 0, -300";
      coords += " l -300, 0";

      var path = document.createElementNS (xmlns, "path");
      path.setAttributeNS (null, 'd', coords);
      g.appendChild (path);

      var svgContainer = document.getElementById ("svgContainer");
      svgContainer.appendChild (svgElem);
    }
  </script>
</head>

<body onload="CreateSVG ()">
  <div id="svgContainer"></div>
</body>
</html>

生成以下代码(在通过Web浏览器分析之后):

<html> == $0
  <head> ... </head>
  <body onload="CreateSVG ()">
    <div id="svgContainer">
      <svg width ="300">
        <g transform="matrix(1,0,0,-1,0,300)">
          <path d="M 0, 0 1 0, 300 1 300, 0 1 0, -300 1 -300, 0"></path>
        </g>
      </svg>
    </div>
  </body>
</html>

如何提取<svg>...</svg>部分以将其打印在外部文件中?

1 个答案:

答案 0 :(得分:0)

像Sujit Agarwal在https://stackoverflow.com/a/21012689/6869524中回答的那样, 一个人应该

  

将其保存在您的服务器上,然后将文本数据传递到您的服务器并使用某种服务器端语言执行文件编写代码。

使用code = svgContainer.innerHTML

检索文本