0

Me gustaría saber cómo puedo crear un texto personalizado en svg, madiante la etiqueta path.

Algo así:

ColorHexa

10
  • ¿Por qué quieres crear texto usando path?, ¿no sería más sencillo usar text con la tipografía que consideres más adecuada? Commented el 5 jul. 2016 a las 9:27
  • 1
    Quieres decir programáticamente dado un texto y una fuente convertirlo a path o usando alguna herramienta. ? Commented el 5 jul. 2016 a las 10:15
  • 1
    @kikocorreoso si lo conviertes a path no dependes de la fuente. Saludos Commented el 5 jul. 2016 a las 10:16
  • @md lo sé, lo sé, pero lo complicas sobremanera reinventando la rueda. Si las letras no son 'cuadradas', es decir, con curvas como en el ejemplo adjunto, no será simple de hacer, tampoco imposible. Commented el 5 jul. 2016 a las 12:17
  • Eso es exactamente lo que quiero, lo que dice @rnd Commented el 5 jul. 2016 a las 18:51

2 respuestas 2

0

Al final lo pude resolver con esta librería en php y me gustaría compartirla por si a alguien le interesa. https://github.com/kartsims/easysvg

0

Aquí tienes un ejemplo de texto svg para rótulos (también en codepen):

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="657" height="360" viewBox="0 0 657 360" enable-background="new 0 0 657 360" xml:space="preserve"> <g id="todo">

//cabecera svg  donde se cambian las medidas de la caja del svg en width y height y la posicion de esta respecto punto" x e y"//
<defs>
<radialGradient id="353" gradientUnits="" x1="0%" y1="50%" x2="100%" y2="50%">
    <stop offset="0" stop-color="rgb(1, 58, 223)"></stop>
    <stop offset="1" stop-color="rgb(206, 216, 246)"></stop>
</radialGradient>
</defs>    

//degradado en el color  que va referido con su id  //
<g id="1657">
<g fill="" stroke="" stroke-width="" name="draga" id="Rectangulo1657" class="a1657" style="transform: matrix3d(6.59362,0,0,0,0,8.05886,0,0,0,0,7.40024,0,-2165,-2021,0,1)"> <g>
<rect style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)" fill="url(#353)" stroke="none" stroke-width="" x="324" y="250" width="100" height="60"></rect>
</g></g></g>
<g id="1656">
<g fill="" stroke="" stroke-width="" name="draga" id="2DE1656" class="a1656" style="transform: matrix3d(1.61051,0,0,0,0,1.61051,0,0,0,0,1.61051,0,-198,-31,0,1)">
 <style type="text/css">@import url(https://fonts.googleapis.com/css?family=Satisfy)</style>
<text stroke-dasharray="" fill="rgb(46, 100, 254)" stroke="#3B0B39" stroke-width="" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)" x="250" y="150" font-family="Satisfy" font-size="100">DE
</text>  

    //etiqueta text con sus dierentes propiedades fill stroke y style transfor que indica la situacion (esta etiqueta se estudia mas a deante por su complegidad) //                              

</g></g>
<g id="1655">
<g fill="" stroke="" stroke-width="" name="draga" id="1ESTE E1655" class="a1655" style="transform: matrix3d(0.649539,0,0,0,0,0.649539,0,0,0,0,0.649539,0,-80,-34,0,1)">
 <style type="text/css">@import url(https://fonts.googleapis.com/css?family=Boogaloo)</style>
<text stroke-dasharray="" fill="rgb(206, 216, 246)" stroke="#0A0A2A" stroke-width="" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)" x="250" y="150" font-family="Boogaloo" font-size="100">ESTE ES MI BLOG
</text>  
</g></g>
<g id="1654">                    
<g fill="" stroke="" stroke-width="" name="draga" id="0TITULO1654" class="a1654" style="transform: matrix3d(0.6561,0,0,0,0,0.6561,0,0,0,0,0.6561,0,-136,219,0,1)">
<style type="text/css">@import url(https://fonts.googleapis.com/css?family=Righteous)</style>
<text stroke-dasharray="" fill="rgb(11, 33, 97)" stroke="#8A0808" stroke-width="" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)" x="250" y="150" font-family="Righteous" font-size="100">TITULO PARA WEB
//agregar fuentes google a un texto svg//
</text>  
</g></g></g>
</svg>  

1
  • Quizás una descripción de cómo se crea el texto haría que sea una respuesta de mayor calidad.
    – Mariano
    Commented el 13 may. 2017 a las 11:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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