Me gustaría saber cómo puedo crear un texto personalizado en svg, madiante la etiqueta path.
Algo así:
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
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>
path
?, ¿no sería más sencillo usartext
con la tipografía que consideres más adecuada?