SVG Inkscape сгенерированный файл не показывает объекты flowRoot в браузере

Я имею дело с SVG файлом, чтобы сделать анимацию в реальном времени в браузере с помощью AJAX.

Все в порядке, за исключением того, чтобы браузер (Chrome или IE9) отображал изображение SVG. Следующий HTML файл не отображает текст 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>

Я попытался изменить код на версию 1.2, изменив следующую строку, но не решив проблему...

   version="1.2"

Мне нужен простой способ редактирования и переноса пользовательской векторной графики в браузер. Я думал, что SVG будет куском пирога, но я столкнулся с такими проблемами...

Любая помощь была оценена.

Rds

Ответы

Ответ 1

Полная спецификация SVG 1.2 не была завершена (как вы можете видеть из ссылки, которая все еще находится в проекте с 2005 года), и только Inkscape когда-либо поддерживал flowRoot, я думаю. Я не думаю, что это предполагало, что flowRoot будет частью SVG 2, так как это, вероятно, приведет к потоку текста с другим и более совместимым с CSS механизмом, поэтому flowRoot лучше избегать.

Используйте команду "Преобразовать в текст" в текстовое меню, чтобы преобразовать ее в текст, совместимый с SVG 1.1.

Ответ 2

Как говорили другие, вы можете использовать конвертировать в текст или unflow, чтобы удалить flowRoot.

Имейте в виду, что текст больше не будет оставаться в пределах указанной вами границы.

Чтобы избежать перехода в FlowRoot, просто нажмите текстовым инструментом и начните вводить текст, а затем сначала перетащите его, чтобы установить привязку для него.

Чтобы создать текст, который помещается в ограничительную рамку, я не уверен, какой лучший метод.