将 SVG 图像转换为路径描述答案

【问题标题】：Convert SVG image to a path description将 SVG 图像转换为路径描述
【发布时间】：2017-05-11 08:06:02
【问题描述】：

本质上，我使用的 API 会向我返回托管在不同域上的 svg 图像。

我想将其用作path 而不是image，以便我可以操作fill 和stroke。就目前而言，我无法这样做。

这是我的代码：

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

所以我想用<path d=代替<image>

就像我在网上找到的一个例子：

<path d="M577.21,131.86l4.06,12.5a3.36,3.36,0,0,0,3.19,2.32h13.14a2.36,2.36,0,0,1,1.39,4.27l-10.63,7.72a3.36,3.36,0,0,0-1.22,3.75l4.06,12.5a2.36,2.36,0,0,1-3.63,2.64l-10.63-7.72a3.36,3.36,0,0,0-3.94,0l-10.63,7.72a2.36,2.36,0,0,1-3.63-2.64l4.06-12.5a3.36,3.36,0,0,0-1.22-3.75l-10.63-7.72a2.36,2.36,0,0,1,1.39-4.27h13.14a3.36,3.36,0,0,0,3.19-2.32l4.06-12.5A2.36,2.36,0,0,1,577.21,131.86Z" transform="translate(-549.97 -130.23)"></path>

这可以用 JavaScript 实现吗？也许是 PHP？感谢您的帮助。

【问题讨论】：

是的，这是可能的，但并不简单。对于 js，这一切都取决于外部服务器的设置。如果它确实允许跨域请求，那么您可以获取 svg 文件（使用 fetch() 或 XHR API），使用 DOMParser 解析它的文本内容，并在您自己的 svg 节点中包含您想要的元素。如果它不允许跨域请求，则您必须从 php 获取数据，然后应用与上述相同的方法，但来自您自己的服务器的响应。
@Kaiido 太棒了！我不知道。谢谢！
<image> 引用什么类型的文件？例如，它是另一个带有路径的 SVG，还是位图图像？

标签： javascript jquery angularjs svg

【解决方案1】：

我想通了。最后还是很简单的，直接用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();

然后就可以获取路径数据了

【讨论】：