[SOLUCIONADO] Insertando un SVG en PHP

JESUMINISTROSYMAS · #1 (**permalink**) 02/02/2017, 22:30

Saludos cordiales,
chicos tengo el siguiente caso espero que puedan ayudarme:

Poseo un archivo PHP donde tengo incluido una etiqueta SVG

Parte de la etiqueta SVG es:

Código PHP:

      <g 
       id="g4125"> 
      <rect 
         ry="10.606602" 
         rx="10.859617" 
         y="243.71503" 
         x="51.147934" 
         height="61.284992" 
         width="693.70422" 
         id="rect4610" 
         style="fill:#ffffff;fill-opacity:1;stroke:none;opacity:1" /> 
      <text 
         sodipodi:linespacing="125%" 
         id="NOMBRE PARTICIPANTE" 
         y="282.4874" 
         x="149.45268" 
         style="font-size:27.87268639px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" 
         xml:space="preserve"><tspan 
           style="font-size:30px;font-weight:bold;-inkscape-font-specification:Sans Bold" 
           y="282.4874" 
           x="149.45268" 
           id="tspan4614" 
           sodipodi:role="line">PEDRO JOSE PEREZ MIRANDA</tspan></text> 
    </g>

Y he hecho esto:

Código PHP:

 
    <g 
       id="g4125"> 
      <rect 
         ry="10.606602" 
         rx="10.859617" 
         y="243.71503" 
         x="51.147934" 
         height="61.284992" 
         width="693.70422" 
         id="rect4610" 
         style="fill:#ffffff;fill-opacity:1;stroke:none;opacity:1" /> 
      <text 
         sodipodi:linespacing="125%" 
         id="NOMBRE PARTICIPANTE" 
         y="282.4874" 
         x="149.45268" 
         style="font-size:27.87268639px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" 
         xml:space="preserve"><tspan 
           style="font-size:30px;font-weight:bold;-inkscape-font-specification:Sans Bold" 
           y="282.4874" 
           x="149.45268" 
           id="tspan4614" 
           sodipodi:role="line"><?PHP echo $nombre; ?></tspan></text> 
    </g>

Pero cuando la variable cambia tambien lo hace la alineacion horizontal del texto.

Mi consulta es, saber si existe la posibilidad de que el nombre que adquiera la variable $nombre la posicion horizontal del SVG se mantenga centrado, no se como tratar el texto como un parrafo, o si alguien tiene una mejor idea estare atento.

Muchas Gracias de Antemano.

caricatos · #2 (**permalink**) 03/02/2017, 00:49

Hola:

No entiendo el anidamiento de un tspan dentro de un text... seguramente ha sido idea del editor (supongo que inkscape)...

El atributo text-anchor con el valor middle suele usarse para centrar el texto.

Saludos

JESUMINISTROSYMAS · #3 (**permalink**) 03/02/2017, 17:48

Saludos, logre como tratar a los textos en Inkscape como párrafos ahora no importa el largo del texto este siempre estará centrado, pero, el GRAN PERO.. ahora no muestra el texto en la salida del PHP

Hice una imagen que consiste en un rectángulo color amarillo con un texto color negro que esta sobre el rectangulo con la palabra NOMBRE DE PRUEBA de color negro, esto lo hice para simplificar el codigo buscando la solucion a mi conflicto.

Código HTML:

Ver original<html lang="es">
<head>
    <title>CERTIFICADO</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" >
    <link rel="stylesheet" type="text/css" href="../../../../admin/config/css/estilos_certificado.css">
</head>
<body>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
 
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   id="svg3370"
   version="1.1"
   inkscape:version="0.48.5 r10040"
   sodipodi:docname="dibujo.svg">
  <defs
     id="defs3372" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.7"
     inkscape:cx="227.34766"
     inkscape:cy="724.82534"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1024"
     inkscape:window-height="715"
     inkscape:window-x="0"
     inkscape:window-y="31"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata3375">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Capa 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="opacity:1;fill:#ffff00;fill-opacity:1;stroke:none"
       id="rect3378"
       width="474.28571"
       height="194.28572"
       x="128.57144"
       y="89.505035"
       rx="10.859617"
       ry="10.606602" />
  </g>
  <flowRoot
     xml:space="preserve"
     id="flowRoot3380"
     style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;text-anchor:middle;text-align:center"
     transform="translate(-20,0)"><flowRegion
       id="flowRegion3382"><rect
         id="rect3384"
         width="441.43668"
         height="67.680222"
         x="162.63457"
         y="161.40764"
         style="text-anchor:middle;text-align:center" /></flowRegion><flowPara
       id="flowPara3386">NOMBRE DE PRUEBA</flowPara></flowRoot></svg>
</body>
</html>

Utilizando el ejemplo no se imprime la palabra NOMBRE DE PRUEBA pero en la imagen SVG desde Inkscape si se ve la palabra

He utilizado una sola capa sin transparencias ni efectos de ningun tipo y el texto esta arriba en el diseño esta sobre el rectángulo que es color amarillo.

caricatos · #4 (**permalink**) 04/02/2017, 01:32

Hola:

Tal vez te interese no usar el editor porque añade mucho código innecesario...

Si solo quieres el texto centrado en un A4... el código podría ser:

Código:

<svg xmlns='http://www.w3.org/2000/svg' width='210mm' height='297mm' x='0' y='0'>
	<rect x="0" y="0" width="210mm" height="297mm" stroke="pink" fill="transparent"/>
	<text x='105mm' y='148.5mm' style='font: bold 36px arial; dominant-baseline: middle; fill: red; text-anchor: middle;' >
		pepemolina.com
	</text>
</svg>

En mi página puedes encontrar muchos ejemplos.

Saludos

JESUMINISTROSYMAS · #5 (**permalink**) 05/02/2017, 00:04

He limpiado el código y ahora funciona perfectamente..! ahora trabajo en insertar un codigo QR sobre el SVG estoy buscando información sobre ello. marcare como solucionado y si no logro encontrar información abriré otro post. Gracias por sus amables respuestas.