私のプロジェクトに含まれているsvgファイルを読み込んでそれに書き込むにはどうしたらいいですか？

Question

私はコードとしてサンプルSVGファイル（のは「myImage.svg」と呼んでみましょう）持っている：それは私のプロジェクトのディレクトリに含まれている

<?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

あなたは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();