как я изменяю этикетку <symbol> на образ в svg

я estudiandte Веб дизайна и у меня есть сомнение с svg, в моем случае я хочу заменить икону, которая использует этикетку path, из-за одного, который использовал бы библиотеку образ, чтобы мочь вводить очевидно образ этот, Вы пример фрагмента моего кодекса:

<symbol class="icon icon-" id="icon-6" viewBox="0 0 40 40">
   <path d="M11.366 22.564l1.291-1.807-1.414-1.414-1.807 1.291c-0.335-0.187-0.694-0.337-1.071-0.444l-0.365-2.19h-2l-0.365 2.19c-0.377 0.107-0.736 0.256-1.071 0.444l-1.807-1.291-1.414 1.414 1.291 1.807c-0.187 0.335-0.337 0.694-0.443 1.071l-2.19 0.365v2l2.19 0.365c0.107 0.377 0.256 0.736 0.444 1.071l-1.291 1.807 1.414 1.414 1.807-1.291c0.335 0.187 0.694 0.337 1.071 0.444l0.365 2.19h2l0.365-2.19c0.377-0.107 0.736-0.256 1.071-0.444l1.807 1.291 1.414-1.414-1.291-1.807c0.187-0.335 0.337-0.694 0.444-1.071l2.19-0.365v-2l-2.19-0.365c-0.107-0.377-0.256-0.736-0.444-1.071zM7 27c-1.105 0-2-0.895-2-2s0.895-2 2-2 2 0.895 2 2-0.895 2-2 2zM32 12v-2l-2.106-0.383c-0.039-0.251-0.088-0.499-0.148-0.743l1.799-1.159-0.765-1.848-2.092 0.452c-0.132-0.216-0.273-0.426-0.422-0.629l1.219-1.761-1.414-1.414-1.761 1.219c-0.203-0.149-0.413-0.29-0.629-0.422l0.452-2.092-1.848-0.765-1.159 1.799c-0.244-0.059-0.492-0.109-0.743-0.148l-0.383-2.106h-2l-0.383 2.106c-0.251 0.039-0.499 0.088-0.743 0.148l-1.159-1.799-1.848 0.765 0.452 2.092c-0.216 0.132-0.426 0.273-0.629 0.422l-1.761-1.219-1.414 1.414 1.219 1.761c-0.149 0.203-0.29 0.413-0.422 0.629l-2.092-0.452-0.765 1.848 1.799 1.159c-0.059 0.244-0.109 0.492-0.148 0.743l-2.106 0.383v2l2.106 0.383c0.039 0.251 0.088 0.499 0.148 0.743l-1.799 1.159 0.765 1.848 2.092-0.452c0.132 0.216 0.273 0.426 0.422 0.629l-1.219 1.761 1.414 1.414 1.761-1.219c0.203 0.149 0.413 0.29 0.629 0.422l-0.452 2.092 1.848 0.765 1.159-1.799c0.244 0.059 0.492 0.109 0.743 0.148l0.383 2.106h2l0.383-2.106c0.251-0.039 0.499-0.088 0.743-0.148l1.159 1.799 1.848-0.765-0.452-2.092c0.216-0.132 0.426-0.273 0.629-0.422l1.761 1.219 1.414-1.414-1.219-1.761c0.149-0.203 0.29-0.413 0.422-0.629l2.092 0.452 0.765-1.848-1.799-1.159c0.059-0.244 0.109-0.492 0.148-0.743l2.106-0.383zM21 15.35c-2.402 0-4.35-1.948-4.35-4.35s1.948-4.35 4.35-4.35 4.35 1.948 4.35 4.35c0 2.402-1.948 4.35-4.35 4.35z" ></path>
</symbol>

я хочу заменить это на образ png или jpg, просто так ничто, что ограничивать я прощаюсь

1
задан 31.05.2019, 22:09
1 ответ

Сначала : Этикетка <symbol> внутри SVG когда бы то ни было renderea. S¦lo шаблон, который ты объявляешь однажды и потом, ты можешь reutilizarla с этикеткой <use>. Из documentaci¦n в MDN :

Заметил that в symbol element itself is not rendered. Only instances of в symbol element (i.e., в reference to в symbol by в element) пашите rendered.

Секунда : Ты можешь использовать librer¦ - в canvg , чтобы читать контент svg и это обращать в canvas. И у этого canvas есть funci¦n toDataURL , чтобы производить дату - url, что он asignarÃ: s в изображение в Вашем признаке src.

Элемент <svg>, что ты нуждаешься в том, чтобы конвертировать дебет содержать этикетку <use>. Ты ничего не достаешь несмотря на то, что конвертируешь элемент, который s¦lo определял бы один <symbol>

function convertir() {

var the_svg=document.getElementById('el_svg').outerHTML.trim();
var canvas = document.createElement('canvas');
var container_img = document.getElementById('contenedor_img');
 
container_img.appendChild(canvas);

canvg(canvas, the_svg);
var la_img = document.createElement("img");

la_img.src = canvas.toDataURL("image/png", 1,{ignoreDimensions:false});
container_img.removeChild(canvas);

container_img.appendChild(la_img); 

}
#convertir {
  display:block;
  clear:both;
}
#contenedor_svg,
#contenedor_img {
padding:3px;
float:left;
display:inline-block;
width:170px;
height:150px;
border: 1px solid #ccc;
}
<script type="text/javascript" src="https://canvg.github.io/canvg/rgbcolor.js"></script> 
<script type="text/javascript" src="https://canvg.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="https://canvg.github.io/canvg/canvg.js"></script> 
  
<button id="convertir" onclick="convertir()">convertir en imagen</button>
<div id="contenedor_svg">
Yo contengo un svg
 
<svg id="el_svg" style="height:100px;width:100px">
  <symbol id="sym01">
    <path d="M98.5,47.5C96.5,45.5,81,35,62,35c-2.1,0-4.2,0.1-6.2,0.3L39,26c0,4.5,1.3,9,2.4,12.1C31.7,40.7,23.3,44,16,44L0,34
	c0,8,4,16,4,16s-4,8-4,16l16-10c7.3,0,15.7,3.3,25.4,5.9C40.3,65,39,69.5,39,74l16.8-9.3c2,0.2,4.1,0.3,6.2,0.3
	c19,0,34.5-10.5,36.5-12.5S100.5,49.5,98.5,47.5z M85.5,50c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5
	C88,48.9,86.9,50,85.5,50z"/>  
  </symbol>
<use href="#sym01"
     x="0" y="0" width="100" height="80"/>
</svg>
</div>
<div id="contenedor_img">
Yo contengo una imagen
</div>

а следовательно я понимаю, canvg он не читает лист стилей, asà - что у SVG должны быть стили inline.

0
ответ дан 03.12.2019, 06:22