javascript - well - El archivo generado por SVG Inkscape no muestra objetos flowRoot en el navegador

what are the new form elements introduced in html5

Question

Estoy tratando con el archivo SVG para hacer algunas animaciones en tiempo real en el navegador usando AJAX.

Todo está bien, excepto para hacer que el navegador (Chrome o IE9) muestre la imagen SVG. El siguiente archivo HTML no muestra el texto de flowRoot:

<?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="744.09448"
   height="600"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   sodipodi:docname="lcl22.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.7"
     inkscape:cx="175.99454"
     inkscape:cy="282.7269"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1366"
     inkscape:window-height="706"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <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 />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-452.36215)">
    <path
       sodipodi:type="arc"
       style="fill:#008000;fill-opacity:1;stroke:#495677;stroke-width:23.16900063;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       id="circle1"
       sodipodi:cx="227.14285"
       sodipodi:cy="156.6479"
       sodipodi:rx="47.142857"
       sodipodi:ry="44.285713"
       d="m 274.28571,156.6479 c 0,24.45833 -21.10658,44.28572 -47.14286,44.28572 C 201.10657,200.93362 180,181.10623 180,156.6479 c 0,-24.45832 21.10657,-44.28571 47.14285,-44.28571 26.03628,0 47.14286,19.82739 47.14286,44.28571 z"
       inkscape:label="#path2985"
       transform="translate(12.857143,635.71428)" />
    <rect
       style="fill:#00ff00;fill-opacity:1;stroke:#495677;stroke-width:4.86899996;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       id="box1"
       width="284.28571"
       height="110"
       x="312.85715"
       y="738.07648"
       inkscape:label="#box1" />
    <flowRoot
       xml:space="preserve"
       id="flowRoot3058"
       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(0,452.36215)"><flowRegion
         id="flowRegion3060"><rect
           id="rect3062"
           width="365.71429"
           height="100"
           x="221.42857"
           y="145.71428"
           style="text-anchor:middle;text-align:center" /></flowRegion><flowPara
         id="flowPara3064"
         style="font-weight:bold;-inkscape-font-specification:Sans Bold">LCL22 TEST</flowPara></flowRoot>  </g>
</svg>

Intenté cambiar el código a la versión 1.2 cambiando la siguiente línea, pero no resolví el problema ...

   version="1.2"

Necesito una forma fácil de editar y traer gráficos vectoriales personalizados al navegador. Pensé que SVG sería pan comido, pero estoy ejecutando este tipo de problemas ...

Cualquier ayuda apreciada.

Rds

Answer 1

Como han dicho otros, puede usar convertir a texto o desencadenar para eliminar el FlowRoot.

Sin embargo, tenga en cuenta que el texto ya no permanecerá dentro del límite que especificó.

Para evitar que FlowRoot siga adelante, simplemente haga clic con la herramienta de texto y comience a escribir en lugar de arrastrar primero para establecer un límite para ella.

Para crear texto que se ajuste a un cuadro delimitador, no estoy seguro de cuál es el mejor método.

Answer 2

La especificación completa de SVG 1.2 nunca se completó (como se puede ver en el enlace que aún está en borrador desde 2005) y solo Inkscape siempre admitió flowRoot, creo. No creo que esté previsto que flowRoot sea parte de SVG 2, ya que es probable que implemente texto fluido con un mecanismo diferente y más compatible con CSS, por lo que es mejor evitar flowRoot.

Use el comando Convertir a texto "en el menú Texto para convertirlo a texto compatible con SVG 1.1.