title: SVG textpath text layout on complex, changing paths
body: <p>I am not sure the problem I have is solvable using the current SVG standard but I thought I would ask here anyway if anyone knows an answer</p>
  
  <p>I have a constantly changing svg path (vertices defined by forming a hull around nodes made in d3, force driven so the nodes constantly move and the bounding hull moves to accomodate the nodes)</p>
  
  <p>Because I can't predict the vertices nor do I know what the text will be (as it depends on the grouping of the nodes in that situation, which changes) all i can do is blindly apply text on a textpath to the path.  The problemis sometimes the text does not display nicely.</p>
  
  <p>Problem 1: upside down text - I don't mind where on the path the text goes but its annoying that it often ends up upside down</p>
  
  <p>For example (image):</p>
  
  <p><img src="https://i.stack.imgur.com/Nk2tm.jpg" alt="enter image description here"></p>
  
  <p><strong><em>[NB Problem 2 branched into <a href="https://stackoverflow.com/questions/16896327/svg-textpath-rendering-breaks-words-up-badly-on-a-textpath-with-sharp-corners">SVG textpath rendering breaks words up badly on a textpath with sharp corners</a> as suggested in answer]</em></strong></p>
  
  <p>Problem 2: broken up text - when a corner forms, text has a tendency to split. up.  I don't think my use of dy to push the text outside the boundary helps (the path is actually tight to the nodes and I apply a 40 stroke-width to give some padding: the dy pushed the text outside that stroke)</p>
  
  <p>For example (image):</p>
  
  <p><img src="https://i.stack.imgur.com/Wtuyk.jpg" alt="enter image description here"></p>
  
  <p>Any ideas on what I can do to fix this?</p>
  
  <p>--Chris</p>
  
  <p>svg code for reference:</p>
  
  <p>Problem 1:</p>
  
  <pre><code>&lt;g id="hull_elements"&gt;
  &lt;path class="boundary" id="Secure"     d="M219.31353652066463,309.7274362305448L199.3259715998452,277.60331505353355L54.5215284230899,92.9756148805194L29.418010605669316,64.72387260525474Z" style="fill: #b0c4de; stroke: #b0c4de; stroke-width: 40px; stroke-linejoin: round;"&gt;&lt;/path&gt;
  &lt;path class="boundary" id="DMZ" d="M234.7675515627913,79.25604751762172L122.76947855325542,190.1418483839412L271.90702281166267,76.40758102069142Z" style="fill: #b0c4de; stroke: #b0c4de; stroke-width: 40px; stroke-linejoin: round;"&gt;&lt;/path&gt;
  &lt;/g&gt;
  &lt;g id="hull_text"&gt;
  &lt;text dy="30"&gt;&lt;textPath startOffset="0" text-anchor="start" method="align" spacing="auto" xlink:href="#Secure"&gt;Secure&lt;/textPath&gt;&lt;/text&gt;
  &lt;text dy="30"&gt;&lt;textPath startOffset="0" text-anchor="start" method="align" spacing="auto" xlink:href="#DMZ"&gt;DMZ&lt;/textPath&gt;&lt;/text&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>Problem 2:</p>
  
  <pre><code>&lt;g id="hull_elements"&gt;&lt;path class="boundary" id="Secure" d="M30.716331539726912,88.02778447495649L66.8405337274694,100.01086904278971L251.78816229874747,53.214214251587265L277.8704519199028,25.642491075146587Z" style="fill: #b0c4de; stroke: #b0c4de; stroke-width: 40px; stroke-linejoin: round;"&gt;&lt;/path&gt;
  &lt;path class="boundary" id="DMZ" d="M177.8575710153683,149.56053657599713L251.04637461899244,245.55658992744486L277.76418020025847,271.7261370009561L159.53295211932644,118.0340968521715Z" style="fill: #b0c4de; stroke: #b0c4de; stroke-width: 40px; stroke-linejoin: round;"&gt;&lt;/path&gt;
  &lt;/g&gt;
  &lt;g id="hull_text"&gt;
  &lt;text dy="30"&gt;&lt;textPath startOffset="0" text-anchor="start" method="align" spacing="auto" xlink:href="#Secure"&gt;Secure&lt;/textPath&gt;&lt;/text&gt;
  &lt;text dy="30"&gt;&lt;textPath startOffset="0" text-anchor="start" method="align" spacing="auto" xlink:href="#DMZ"&gt;DMZ&lt;/textPath&gt;&lt;/text&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>jsfiddle to play with that shows this (move the nodes to see the issues)
  <a href="http://jsfiddle.net/zuzzy/GC2C2/" rel="nofollow noreferrer">http://jsfiddle.net/zuzzy/GC2C2/</a></p>
  
  <p>[edited to add the NB of the branch of problem 2 - zuzzy]</p>