將SVG圖像轉換爲路徑描述

本質上，我使用的是一個API，它向另一個域上託管的我返回一個svg圖像。將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>

所以不是<image>我想使用<path d=

像一個例子在線，我發現做：

<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？謝謝您的幫助。

來源

2016-12-27 Katie

是的，它是可能的，但不是直接的。對於js，這一切都取決於外部服務器設置。如果它允許跨源請求，那麼你可以獲取svg文件（使用'fetch（）'或XHR API），使用DOMParser解析它的文本內容，並在你自己的svg節點中包含你想要的元素。如果它不允許跨源請求，那麼你將不得不從PHP獲取數據，然後應用上面的相同，但從你自己的服務器的響應。 – Kaiido

@Kaiido哦，輝煌！我不知道。謝謝！ – Katie

''引用了什麼類型的文件？例如，它是另一個帶有路徑的SVG，還是位圖圖像？ –

我想通了。這是在年底相當簡單，只需使用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();

你就可以獲取路徑數據

來源

2016-12-27 04:43:53 Katie

將SVG圖像轉換爲路徑描述

回答

相關問題