Преобразование 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 изображения в описание пути

ответ

Смежные вопросы