title: fabricjs IText missing stroke after using toSVG
body: <p>There seems to be a bug in fabricjs when using toSVG together with IText. 
  When changing an IText which has a stroke, then fabricjs breaks all the characters into seperate tspans with stroke-width = 0.</p>
  
  <p>As shown in this example (Try editing the text twice by adding new letters): </p>
  
  <p><a href="https://jsfiddle.net/xx37jpms/" rel="nofollow noreferrer">https://jsfiddle.net/xx37jpms/</a></p>
  
  <pre><code>var canvas = new fabric.Canvas('c');
  var text_input = new fabric.IText("Edit this and save", {           
      fontSize: 100,
      stroke: '#dd5f60',
      strokeWidth: 2,
      fill: '#00ff00',
  });
  
  canvas.add(text_input);
  canvas.renderAll();
  document.getElementById('svg').innerHTML = canvas.toSVG();
  
  document.getElementById('btn').onclick = function () {
      document.getElementById('svg').innerHTML = canvas.toSVG();
  }
  </code></pre>
  
  <p>As can be seen, the SVG code before editing is:</p>
  
  <pre><code>        &lt;text font-family="Times New Roman" font-size="100" font-weight="normal" style="stroke: rgb(221,95,96); stroke-width: 2; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,255,0); fill-rule: nonzero; opacity: 1;"&gt;
              &lt;tspan x="-354.09" y="31.5" fill="#00ff00"&gt;Edit this and save&lt;/tspan&gt;
          &lt;/text&gt;
  </code></pre>
  
  <p>But after it becomes:</p>
  
  <pre><code>         &lt;text font-family="Times New Roman" font-size="100" font-weight="normal" style="stroke: rgb(221,95,96); stroke-width: 2; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,255,0); fill-rule: nonzero; opacity: 1;"&gt;
              &lt;tspan x="-295.75" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"&gt;E&lt;/tspan&gt;
              &lt;tspan x="-234.66" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"&gt;d&lt;/tspan&gt;
              &lt;tspan x="-184.66" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"&gt;i&lt;/tspan&gt;
              &lt;tspan x="-156.88" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"&gt;t&lt;/tspan&gt;
              &lt;tspan x="-129.1" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"&gt; &lt;/tspan&gt;
              &lt;tspan x="-104.1" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"&gt;l&lt;/tspan&gt;
              &lt;tspan x="-76.33" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"&gt; &lt;/tspan&gt;
              &lt;tspan x="-51.33" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"&gt;a&lt;/tspan&gt;
              &lt;tspan x="-6.94" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"&gt;n&lt;/tspan&gt;
              &lt;tspan x="43.06" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"&gt;d&lt;/tspan&gt;
              &lt;tspan x="93.06" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"&gt; &lt;/tspan&gt;
              &lt;tspan x="118.06" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"&gt;s&lt;/tspan&gt;
              &lt;tspan x="156.97" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"&gt;a&lt;/tspan&gt;
              &lt;tspan x="201.36" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"&gt;v&lt;/tspan&gt;
              &lt;tspan x="251.36" y="31.5" style="stroke: rgb(221,95,96); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,255,0); fill-rule: ; opacity: 1;"&gt;e&lt;/tspan&gt;
          &lt;/text&gt;
  </code></pre>
  
  <p>This is a big problem for us, but I have no idea how to fix it. Any help would be much appreciated.</p>