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? 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. ? el 5 jul. 2016 a las 10:15
  • 1
    @kikocorreoso si lo conviertes a path no dependes de la fuente. Saludos 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. el 5 jul. 2016 a las 12:17
  • Eso es exactamente lo que quiero, lo que dice @rnd 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
    el 13 may. 2017 a las 11:36

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.