1

soy estudiandte de diseño web y tengo una duda con svg, en mi caso quiero sustituir un icono que usa la etiqueta path, por uno que use la biblioteca imagen para poder obviamente insertar una imagen este es un ejemplo de un fragmento de mi codigo:

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

quiero sustituir eso por una imagen png o jpg, sin mas nada que acotar me despido

4
  • Tendras el codigo o ejemplo de lo que quieres modificar? Saludos. el 28 mar. 2018 a las 1:43
  • <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-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> es algo asi tuve que borrar parametros por cuestion de carcateres el 28 mar. 2018 a las 1:51
  • El código que tengas añádelo la pregunta y dale formato con el icono {}
    – user75901
    el 28 mar. 2018 a las 1:52
  • no entiendo, me sige diciendo que tengo caracteres de mas inclusi si los encierro en {}`s el 28 mar. 2018 a las 1:55

1 respuesta 1

0

Primero: Una etiqueta <symbol> dentro de un SVG nunca se renderea. Es sólo una plantilla que declaras una vez y luego puedes reutilizarla con una etiqueta <use>. De la documentación en MDN:

Note that a symbol element itself is not rendered. Only instances of a symbol element (i.e., a reference to a symbol by a element) are rendered.

Segundo: Puedes usar la librería canvg para leer el contenido del svg y convertirlo a un canvas. Y ese canvas tiene la función toDataURL para generar un data-url que le asignarás a una imagen en su atributo src.

El elemento <svg> que necesitas convertir debe contener una etiqueta <use>. No sacas nada con convertir un elemento que sólo defina un <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>

Por lo que entiendo, canvg no lee la hoja de estilos, así que el SVG debe tener los estilos inline.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.