@AlTerminator

Как задать img источник из svg inline?

Нужно, чтобы у img src был равен изображению из svg.

<!DOCTYPE html>
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body onload="OnLoad()">
  <?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg onclick="SvgLogoClick()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="172" height="32" viewBox="0 0 172 32" xml:space="preserve"> <desc></desc> <rect x="0" y="0" width="100%" height="100%" fill="transparent"></rect> <g transform="matrix(0 0 0 0 0 0)" id="ab89e07f-1442-43df-bb69-1ec894fd456a"> </g> <g transform="matrix(1 0 0 1 86 16)" id="1fbb36a9-15d3-4ba8-b58d-3b0aa80f1c18"> <rect id="RectBG" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: transparent; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  x="-86" y="-16" rx="0" ry="0" width="172" height="32"/> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0 0 0 0 0 0)"> <g> </g> </g> <g transform="matrix(0.32 0 0 0.32 15.33 16)" id="7f53d056-24ba-4c38-9fbb-39099604a94d"> 	<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #000000; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  xlink:href="data:image/png;base64,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" x="-50" y="-50" width="100" height="100"></image> </g> <g transform="matrix(0.19 0 0 0.19 101.6 16)" id="882d3729-3beb-4d12-a29d-ee9b20efa81c"> 	<text id="TextLogo" xml:space="preserve" font-family="Raleway" font-size="105" font-style="normal" font-weight="900" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #000000; fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-318.02" y="32.98" >ГОСТСТРОЙ</tspan></text> </g></svg>
  <img src="" alt="">
  <script>
   function OnLoad(){
      document.querySelector("img").src = ""; //Что прописать в источнике img?
   }
  </script>
 </body>
</html>
  • Вопрос задан
  • 129 просмотров
Решения вопроса 1
@AlTerminator Автор вопроса
Нужно использовать <use>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
NikFaraday
@NikFaraday
Student full-stack Developer
Вы можете вывести изображение в формате svg прямо а html разметку и работать с ним± как с img. Попробуйте открыть svg в любом редакторе текста/кода и перекопировать его содержимое в свой html. Так же рекоменду почитать про svg хотя бы в этой статье
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы