Question

我有一个示例svg文件（让我们称之为＆＃34; myImage.svg＆＃34;）作为代码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg>
  <g>
    <rect
       style="fill:#ff8080;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       id="rect3336"
       width="100"
       height="10"
       x="0"
       y="412.36221" />
  </g>
</svg>

它包含在我的项目目录中。

在另一个JavaScript文件中，我想做这样的事情：

var file = getFile("myImage.svg");
var rect = file.getElement("rect");
rect.getAttribute("width") = "1000";

我已经在StackOverflow上阅读了很多问题，但我不知道从哪里开始获取我的文件。

Answer 1

您可以在XMLHttpRequest()元素使用DOMParser()，String.prototype.indexOf()，String.prototype.slice()，<a>，download元素，<a>属性，encodeURIComponent()

  var request = new XMLHttpRequest();
  request.open("GET", "myImage.svg");
  request.setRequestHeader("Content-Type", "image/svg+xml");
  request.addEventListener("load", function(event) {
    var response = event.target.responseText;
    var doc = new DOMParser();
    var xml = doc.parseFromString(response, "image/svg+xml");
    var rect = xml.getElementById("rect3336");
    rect.setAttribute("width", 1000);
    var result = response.slice(0, response.indexOf("<svg"));
    result += xml.documentElement.outerHTML;
    var a = document.createElement("a");
    a.download = "myImage.svg";
    a.href = "data:image/svg+xml," + encodeURIComponent(result);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  });
  request.send();

如何读取项目中包含的svg文件并写入？

1 个答案: