Javascript 将SVG图像转换为路径描述

本质上，我使用的是一个API，它将一个svg图像返回给托管在不同域上的我

我想将其用作

路径

而不是

图像

，以便我可以操作

填充

和

笔划

。就目前而言，我无法做到这一点

这是我的代码：

<svg height="100%" width="100%" position>
     <rect x="0" y="0" width="100%" height="100%" fill="#288feb"></rect>
     <g class="groupLayer">
          <image xlink:href="" ng-href="{{ctrl.iconObject[0].icon_url}}" x="0" y="-40" height="50px"/>
          <text fill="#ffffff" x="0" y="0" font-size="48" font-family="Verdana">{{ctrl.text}}</text>
     </g>
</svg>

{{ctrl.text}

---

因此，我想用

来代替
，而不是
。通过简单地使用
XMLHttpRequest
，最终非常简单：

function reqListener () {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.svg");
oReq.send();

然后可以获取路径数据
是的，这是可能的，但并不简单。对于js，这完全取决于外部服务器设置。如果它确实允许跨源请求，那么您可以获取svg文件（使用
fetch（）
或XHR API），使用DOMParser解析其文本内容，并在您自己的svg节点中包含所需的元素。如果它不允许跨源请求，那么您必须从php获取数据，然后应用与上面相同的方法，但要从您自己的服务器响应中应用。@kaido哦，太棒了！我不知道。谢谢
引用什么类型的文件？例如，它是另一个包含路径的SVG，还是位图图像？
function reqListener () {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.svg");
oReq.send();