Tengo un problema con un círculo de texto relacionados con SVG. Mi objetivo es crear un camino que me permita escribir en él, pero también centrar el texto, manteniendo la pista con mi camino – desde la parte superior del círculo.

Ejemplo

Que es lo que parece (imagen del interior)

Problema

Actualmente estoy usando textPath + ruta de combinación para generar la ruta y escribir en ella.

<svg>
<defs>
<path id="textPath" d="M 200 175 A 25 25 0 0 0 182.322 217.678" />
</defs>
<text x="25" y="0"><textPath xlink:href="#textPath" startOffset="0" >here goes my text</textPath></text>
</svg>

También traté de Rafael de la biblioteca para gestionar el trabajo, pero en serio no puedo hacer lo que quiero. Es aquí alguien que se las arregló para hacer que funcione? O hay alguna manera para que sea así?

InformationsquelleAutor OldNurse | 2013-03-19

1 Comentario

  1. 18

    definir su texto ruta de acceso completa de hemisferio superior del arco elíptico que usted desea dibujar en:

    <path id="textPath" d="M 250 500 A 250,150 0 1 1 750,500" />

    y establecer el startOffset de su textPath a 50%. tenga en cuenta que su archivo svg no está bien formado, como es la falta de definición de espacio de nombres para el xlink. el siguiente es un trabajo independiente ejemplo:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- SO: http://stackoverflow.com/questions/15495978/svg-circled-text-on-textpath-center-align  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg"
       xmlns:xhtml="http://www.w3.org/1999/xhtml"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       version="1.1"
       width="20cm" height="20cm"
       viewBox="0 0 1000 1000"
       preserveAspectRatio="xMinYMin"
       style="background-color:white; border: solid 1px black;"
    >
    <defs>
    <path id="textPath" d="M 250 500 A 250,150 0 1 1 750,500"/>
    </defs>
    <text x="0" y="0" text-anchor="middle" style="font-size:30pt;"><textPath xlink:href="#textPath" startOffset="50%" >here goes my text</textPath></text>
    </svg>

    re: comentarios sobre una solución para ir todo el camino alrededor del círculo:
    lo esencial es definir el texto ruta de acceso a extender a lo largo de toda la circunferencia, como este:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- SO: http://stackoverflow.com/questions/15495978/svg-circled-text-on-textpath-center-align  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg"
       xmlns:xhtml="http://www.w3.org/1999/xhtml"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       version="1.1"
       width="20cm" height="20cm"
       viewBox="0 0 1000 1000"
       preserveAspectRatio="xMinYMin"
       style="background-color:white; border: solid 1px black;"
    >
    <defs>
    <path id="textPath" d="M 250 500 A 250,250 0 1 1 250 500.0001"/>
    </defs>
    <text x="0" y="0" text-anchor="middle" style="font-size:30pt;"><textPath xlink:href="#textPath" startOffset="50%" >this is a merry-go-round of all my text wrapped around a circle, a vbery big one</textPath></text>
    </svg>
    • definir texto ruta de acceso completa de hemisferio superior del arco elíptico que usted desea dibujar en: Lo que si necesito un círculo completo a escribir? Entonces, ¿qué?

Dejar respuesta

Please enter your comment!
Please enter your name here