SVG image preview issue - svg

I have an editor in my ionic 1 app, using which SVG images are getting created.
Below is the SVG image:
But when I am displaying same image in my app.
<ion-view>
<ion-content>
<img src= "img.svg">
</ion-content>
</ion-view>
It is looking like:
The text got shifted to left. What can be the issue?
EDIT : SVG Image:
<svg width="226.77168" height="226.77168" xmlns="http://www.w3.org/2000/svg">
<g>
<title>background</title>
<rect fill="#ffff00" id="canvas_background" height="228.77168" width="228.77168" y="-1" x="-1"/>
</g>
<g id="maingroup">
<title>Layer 1</title>
<text height="61.921875" width="110.890625" data-size="5" class="text_data" autocomplete="false" editable-text="true" text-anchor="start" font-family="Arial" font-size="18.8976377952755" id="svg_1" y="99.93397766491398" x="57.941792488098145" stroke-width="0" stroke="#000" fill="#000000">
<tspan dx="0" stroke-width="0" class="helpTspan"/>
<tspan dx="4.22119140625" data-text="The label is" class="inner-text" stroke-width="0">The label is
<tspan visibility="hidden"></tspan></tspan>
<tspan dy="1.05em" dx="-106.66162109375" data-text="or for testing" class="inner-text" stroke-width="0">or for testing
<tspan visibility="hidden"></tspan></tspan>
<tspan dy="1.05em" dx="-107.1904296875" data-text="test the text" class="inner-text" stroke-width="0">test the text
<tspan visibility="hidden"></tspan></tspan>
</text>
<path stroke="null" height="137.00021362304688" width="122.99990844726562" class="shape" data-type="shape" data-name="Square" data-id="11" id="svg_4" d="M52.386104583740234,44.885799407958984L52.386104583740234,181.88600158691406L175.38600158691406,181.88600158691406L175.38600158691406,44.885799407958984L52.386104583740234,44.885799407958984L52.386104583740234,44.885799407958984zM170.26231384277344,176.1790008544922L57.50979232788086,176.1790008544922L57.50979232788086,50.59700012207031L170.26231384277344,50.59700012207031L170.26231384277344,176.1790008544922L170.26231384277344,176.1790008544922z" fill-opacity="null" stroke-opacity="null" stroke-width="null" fill="#000000"/>
</g>
</svg>


I believe the problem is that you are positioning each line of text relative to the end of the previous line of text. It would only take minor differences in the font rendering engines of the mobile browsers to end up with the line of text being a pixel or two shorter or longer. That would mean that the start of the next line would end up in a slight different place.
If this is the problem, then you should be able to avoid it by setting a specific start x for each line of text, rather than using dx.
Try this version of the file and see if it is any better.
<svg width="226.77168" height="226.77168" xmlns="http://www.w3.org/2000/svg">
<g>
<title>background</title>
<rect fill="#ffff00" id="canvas_background" height="228.77168" width="228.77168" y="-1" x="-1"/>
</g>
<g id="maingroup">
<title>Layer 1</title>
<text height="61.921875" width="110.890625" data-size="5" class="text_data" autocomplete="false" editable-text="true" text-anchor="start" font-family="Arial" font-size="18.8976377952755" id="svg_1" y="99.93397766491398" x="57.941792488098145" stroke-width="0" stroke="#000" fill="#000000">
<tspan dx="4.22119140625" data-text="The label is" class="inner-text" stroke-width="0">The label is</tspan>
<tspan dy="1.05em" x="57.344" data-text="or for testing" class="inner-text" stroke-width="0">or for testing</tspan>
<tspan dy="1.05em" x="61" data-text="test the text" class="inner-text" stroke-width="0">test the text</tspan>
</text>
<path stroke="null" height="137.00021362304688" width="122.99990844726562" class="shape" data-type="shape" data-name="Square" data-id="11" id="svg_4" d="M52.386104583740234,44.885799407958984L52.386104583740234,181.88600158691406L175.38600158691406,181.88600158691406L175.38600158691406,44.885799407958984L52.386104583740234,44.885799407958984L52.386104583740234,44.885799407958984zM170.26231384277344,176.1790008544922L57.50979232788086,176.1790008544922L57.50979232788086,50.59700012207031L170.26231384277344,50.59700012207031L170.26231384277344,176.1790008544922L170.26231384277344,176.1790008544922z" fill-opacity="null" stroke-opacity="null" stroke-width="null" fill="#000000"/>
</g>
</svg>

Related

How to make SVG black bar with centered text responsive?

I'm trying to make an SVG element fit to the bottom of the page with "Loading..." text centered regardless of the container's width. This is my current code which isn't working as the message is always in a fixed position.
<svg id="svg-bottom" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="bottom">
<rect height="40" width="100%" y="0" x="0" fill="#000000" fill-opacity="0.676460598" id="panel"></rect>
<text id="status" font-family="GothamRounded-Medium, Gotham Rounded" font-size="20" font-weight="400" fill="#FFFFFF">
<tspan x="190.97" y="16">Loading…</tspan>
</text>
</g>

I solved the above with the following:
<text font-family="GothamRounded-Medium, Gotham Rounded" font-size="20" font-weight="400" fill="#FFFFFF" x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">Loading…</text>

Mouseover on SVG text in the way

I’m trying to make an infographic that changes colour as you mouseover and click various sections. I have managed to do the mouseover colour change and click, however there is text over the block and when the mouse goes over that the SVG thinks that i’m Mousing a different layer. I’ve tried adding the :hover to the group but had no joy. Any thoughts would be welcome:
https://jsfiddle.net/dxv0paco/2/
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 798">
<defs>
<style>.cls-25,.cls-31,.cls-32{font-family:MyriadPro-Regular, Myriad Pro;}.cls-25{font-size:24px;}.cls-25,.cls-30,.cls-31{fill:#fff;}.cls-31{font-size:14px;}.cls-32{letter-spacing:-0.03em;}.cls-48{fill:#d4145a;}.cls-49{letter-spacing:0em;}.cls-48:hover{fill: #fbb03b;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-ms-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}g#two a{cursor: pointer;}
</style>
</defs>
<title>Artboard2</title>
<g id="two"><a href="#">
<path class="cls-48" d="M733.28,197q6.06,12.34-.55,25.78Q725.28,237.92,703,251.9a145.37,145.37,0,0,1-27.38,13.7,135.53,135.53,0,0,1-24,6.54q-10.92,1.78-26.33,3.1-11,.83-19.18,2t-16.5,3.15l18.68,29.82-32.27,20.21a188.93,188.93,0,0,1-10.65,160.66q7.26-5.6,17.68-4.67,15.64,1.39,39.69,16.8l17.74,11.36-13.26,20.69L609.4,523.89q-7.68-4.92-12.68-6.46t-7.25,2q-1.58,2.46.66,5.48a28.51,28.51,0,0,0,6.13,5.83q3.88,2.82,11.58,7.75l4.14,2.65q21.87,14,27.37,5.43a7.51,7.51,0,0,0,1.09-2.12l30.35,19.44q-3.46,5.4-1.16,10.7t11.18,11q14.38,9.21,17.55,4.27,1.95-3.06,0-5.58a31.44,31.44,0,0,0-5.75-5.34c-2.51-1.88-4.32-3.24-5.45-4.07L682,571.56l13.41-20.93,6,3.67q23.18,15,30,28.49a24.8,24.8,0,0,1,1.77,19.46A389.85,389.85,0,0,0,733.28,197Z"/>
<text class="cls-25" transform="translate(644 309.14)">Business
<tspan class="cls-49" x="0" y="28.8">Planning</tspan>
</text>
<text class="cls-31" transform="translate(604.83 358.31)">
<tspan class="cls-32">We Formulate a plan that</tspan>
<tspan x="0" y="16.8">achieves your goals then we</tspan>
<tspan x="0" y="33.6">manage and evolve that plan</tspan>
<tspan x="0" y="50.4">as your business develops. Not</tspan>
<tspan x="0" y="67.2">a document but a model in</tspan>
<tspan x="0" y="84">which you test scenarios and</tspan>
<tspan x="0" y="100.8">that evolves with you.</tspan>
</text>
<path class="cls-30" d="M686.15,528.26c1-2.4,2.38-4.36,5-5.13a6.33,6.33,0,0,1,4.55.34,1.46,1.46,0,0,0,1.85-.28,11.1,11.1,0,0,1,2.12-1.66c.92-.48,1.77-.53,2.4.32a2,2,0,0,1-.26,2.55,3,3,0,0,1-.69.58,2.87,2.87,0,0,0-1.42,3.65c.91,3.28-1.34,6.71-4.61,7.74a6.94,6.94,0,0,1-8.33-3.66c-.18-.39-.18-.89-.63-1.13Zm10,1.53a3.18,3.18,0,0,0-3.12-3.21,3.32,3.32,0,0,0-3.25,3.29,3.39,3.39,0,0,0,3.26,3.14A3.2,3.2,0,0,0,696.19,529.79Z"/>
<path class="cls-30" d="M754,509.56c-.42.27-.41.78-.6,1.17a6.17,6.17,0,0,1-5.58,3.69,5.87,5.87,0,0,1-5.89-3.37,1.79,1.79,0,0,0-2.07-1.18,4.35,4.35,0,0,1-1.35,0,1.69,1.69,0,0,1-1.48-2.07c.14-.92.56-1.36,1.71-1.32s2.58,0,3.36-1.67a4.92,4.92,0,0,1,4.51-2.87c1.78-.09,3.38-.18,4.78,1a8,8,0,0,1,2.61,3.94Zm-3.68-1.45a2.76,2.76,0,0,0-2.76-2.77A2.73,2.73,0,0,0,744.8,508c-.06,1.16,1.28,2.94,2.23,3A3.12,3.12,0,0,0,750.32,508.11Z"/>
<path class="cls-30" d="M719.84,522a13.2,13.2,0,0,1-9.28-3.67c-.78-.73-1.25-.71-1.93,0a13.68,13.68,0,0,1-1.82,1.57,1.67,1.67,0,0,1-2.53-.25,1.64,1.64,0,0,1,.21-2.54c2.58-1.56,2.87-3.38,2-6.24-1.29-4-.11-7.93,2.45-11.32.48-.64.53-1,0-1.63-1.79-2-3.55-4-5.25-6a1.4,1.4,0,0,0-1.79-.44,6.82,6.82,0,0,1-8.58-4.79A6.87,6.87,0,0,1,706.48,483a6.6,6.6,0,0,1-.39,4.84,1.25,1.25,0,0,0,.31,1.75c1.87,1.94,3.61,4,5.35,6,.38.44.59.7,1.2.34a14.29,14.29,0,0,1,6.35-1.68,13.09,13.09,0,0,1,8.11,1.91.84.84,0,0,0,1.17-.12c1.24-1.11,2.46-2.23,3.76-3.26.58-.46.38-.88.27-1.43a5.4,5.4,0,0,1,1.8-5.57,5.09,5.09,0,0,1,5.49-.95,5.5,5.5,0,0,1-3.37,10.47,1.86,1.86,0,0,0-2.1.52,31.71,31.71,0,0,1-2.85,2.47c-.74.55-.72,1-.24,1.68,3.33,4.78,3.49,9.78.82,14.88a12.13,12.13,0,0,1-5.26,5.23,1.61,1.61,0,0,0-1,2.32c.45,1.38.45,2.92,1,4.22s2.36,1,3.53,1.69A7.3,7.3,0,0,1,727.2,542a7.41,7.41,0,0,1-7.24-4.64,7.23,7.23,0,0,1,2.28-8.39,2,2,0,0,0,.84-2.6c-.24-.71-.33-1.47-.5-2.2C722.07,522,722.07,522,719.84,522Zm10.41-14A10.19,10.19,0,0,0,719.5,497.8,10.26,10.26,0,1,0,730.25,508Zm-3.53,30.3a3.6,3.6,0,0,0,3.75-3.49,3.72,3.72,0,0,0-3.63-3.79,3.63,3.63,0,0,0-3.64,3.6A3.54,3.54,0,0,0,726.72,538.27ZM703.05,484.9a3.07,3.07,0,0,0-3.13-3.13,3.12,3.12,0,0,0-3.22,3.2c0,1.42,1.71,3.4,2.88,3.4A3.7,3.7,0,0,0,703.05,484.9Zm36.78,5.32a2,2,0,0,0-1.84-2,1.86,1.86,0,0,0-1.81,2,1.66,1.66,0,0,0,1.87,1.72A1.72,1.72,0,0,0,739.83,490.22Z"/>
<path class="cls-48" d="M696.19,529.79a3.2,3.2,0,0,1-3.11,3.22,3.39,3.39,0,0,1-3.26-3.14,3.32,3.32,0,0,1,3.25-3.29A3.18,3.18,0,0,1,696.19,529.79Z"/>
<path class="cls-48" d="M750.32,508.11a3.12,3.12,0,0,1-3.29,2.81c-.95,0-2.29-1.81-2.23-3a2.73,2.73,0,0,1,2.76-2.61A2.76,2.76,0,0,1,750.32,508.11Z"/>
<path class="cls-48" d="M730.25,508A10.28,10.28,0,1,1,719.5,497.8,10.24,10.24,0,0,1,730.25,508Z"/>
<path class="cls-48" d="M726.72,538.27a3.54,3.54,0,0,1-3.52-3.68,3.63,3.63,0,0,1,3.64-3.6,3.72,3.72,0,0,1,3.63,3.79A3.6,3.6,0,0,1,726.72,538.27Z"/>
<path class="cls-48" d="M703.05,484.9a3.7,3.7,0,0,1-3.47,3.47c-1.17,0-2.85-2-2.88-3.4a3.12,3.12,0,0,1,3.22-3.2A3.07,3.07,0,0,1,703.05,484.9Z"/>
<path class="cls-48" d="M739.83,490.22a1.72,1.72,0,0,1-1.78,1.66,1.66,1.66,0,0,1-1.87-1.72,1.86,1.86,0,0,1,1.81-2A2,2,0,0,1,739.83,490.22Z"/></a>
</g>
</svg>

Just make the text pointer-events: none if you want it to be ignored when moused over.
text {
pointer-events: none;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 798">
<defs>
<style>.cls-25,.cls-31,.cls-32{font-family:MyriadPro-Regular, Myriad Pro;}.cls-25{font-size:24px;}.cls-25,.cls-30,.cls-31{fill:#fff;}.cls-31{font-size:14px;}.cls-32{letter-spacing:-0.03em;}.cls-48{fill:#d4145a;}.cls-49{letter-spacing:0em;}.cls-48:hover{fill: #fbb03b;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-ms-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}g#two a{cursor: pointer;}
</style>
</defs>
<title>Artboard2</title>
<g id="two"><a href="#">
<path class="cls-48" d="M733.28,197q6.06,12.34-.55,25.78Q725.28,237.92,703,251.9a145.37,145.37,0,0,1-27.38,13.7,135.53,135.53,0,0,1-24,6.54q-10.92,1.78-26.33,3.1-11,.83-19.18,2t-16.5,3.15l18.68,29.82-32.27,20.21a188.93,188.93,0,0,1-10.65,160.66q7.26-5.6,17.68-4.67,15.64,1.39,39.69,16.8l17.74,11.36-13.26,20.69L609.4,523.89q-7.68-4.92-12.68-6.46t-7.25,2q-1.58,2.46.66,5.48a28.51,28.51,0,0,0,6.13,5.83q3.88,2.82,11.58,7.75l4.14,2.65q21.87,14,27.37,5.43a7.51,7.51,0,0,0,1.09-2.12l30.35,19.44q-3.46,5.4-1.16,10.7t11.18,11q14.38,9.21,17.55,4.27,1.95-3.06,0-5.58a31.44,31.44,0,0,0-5.75-5.34c-2.51-1.88-4.32-3.24-5.45-4.07L682,571.56l13.41-20.93,6,3.67q23.18,15,30,28.49a24.8,24.8,0,0,1,1.77,19.46A389.85,389.85,0,0,0,733.28,197Z"/>
<text class="cls-25" transform="translate(644 309.14)">Business
<tspan class="cls-49" x="0" y="28.8">Planning</tspan>
</text>
<text class="cls-31" transform="translate(604.83 358.31)">
<tspan class="cls-32">We Formulate a plan that</tspan>
<tspan x="0" y="16.8">achieves your goals then we</tspan>
<tspan x="0" y="33.6">manage and evolve that plan</tspan>
<tspan x="0" y="50.4">as your business develops. Not</tspan>
<tspan x="0" y="67.2">a document but a model in</tspan>
<tspan x="0" y="84">which you test scenarios and</tspan>
<tspan x="0" y="100.8">that evolves with you.</tspan>
</text>
<path class="cls-30" d="M686.15,528.26c1-2.4,2.38-4.36,5-5.13a6.33,6.33,0,0,1,4.55.34,1.46,1.46,0,0,0,1.85-.28,11.1,11.1,0,0,1,2.12-1.66c.92-.48,1.77-.53,2.4.32a2,2,0,0,1-.26,2.55,3,3,0,0,1-.69.58,2.87,2.87,0,0,0-1.42,3.65c.91,3.28-1.34,6.71-4.61,7.74a6.94,6.94,0,0,1-8.33-3.66c-.18-.39-.18-.89-.63-1.13Zm10,1.53a3.18,3.18,0,0,0-3.12-3.21,3.32,3.32,0,0,0-3.25,3.29,3.39,3.39,0,0,0,3.26,3.14A3.2,3.2,0,0,0,696.19,529.79Z"/>
<path class="cls-30" d="M754,509.56c-.42.27-.41.78-.6,1.17a6.17,6.17,0,0,1-5.58,3.69,5.87,5.87,0,0,1-5.89-3.37,1.79,1.79,0,0,0-2.07-1.18,4.35,4.35,0,0,1-1.35,0,1.69,1.69,0,0,1-1.48-2.07c.14-.92.56-1.36,1.71-1.32s2.58,0,3.36-1.67a4.92,4.92,0,0,1,4.51-2.87c1.78-.09,3.38-.18,4.78,1a8,8,0,0,1,2.61,3.94Zm-3.68-1.45a2.76,2.76,0,0,0-2.76-2.77A2.73,2.73,0,0,0,744.8,508c-.06,1.16,1.28,2.94,2.23,3A3.12,3.12,0,0,0,750.32,508.11Z"/>
<path class="cls-30" d="M719.84,522a13.2,13.2,0,0,1-9.28-3.67c-.78-.73-1.25-.71-1.93,0a13.68,13.68,0,0,1-1.82,1.57,1.67,1.67,0,0,1-2.53-.25,1.64,1.64,0,0,1,.21-2.54c2.58-1.56,2.87-3.38,2-6.24-1.29-4-.11-7.93,2.45-11.32.48-.64.53-1,0-1.63-1.79-2-3.55-4-5.25-6a1.4,1.4,0,0,0-1.79-.44,6.82,6.82,0,0,1-8.58-4.79A6.87,6.87,0,0,1,706.48,483a6.6,6.6,0,0,1-.39,4.84,1.25,1.25,0,0,0,.31,1.75c1.87,1.94,3.61,4,5.35,6,.38.44.59.7,1.2.34a14.29,14.29,0,0,1,6.35-1.68,13.09,13.09,0,0,1,8.11,1.91.84.84,0,0,0,1.17-.12c1.24-1.11,2.46-2.23,3.76-3.26.58-.46.38-.88.27-1.43a5.4,5.4,0,0,1,1.8-5.57,5.09,5.09,0,0,1,5.49-.95,5.5,5.5,0,0,1-3.37,10.47,1.86,1.86,0,0,0-2.1.52,31.71,31.71,0,0,1-2.85,2.47c-.74.55-.72,1-.24,1.68,3.33,4.78,3.49,9.78.82,14.88a12.13,12.13,0,0,1-5.26,5.23,1.61,1.61,0,0,0-1,2.32c.45,1.38.45,2.92,1,4.22s2.36,1,3.53,1.69A7.3,7.3,0,0,1,727.2,542a7.41,7.41,0,0,1-7.24-4.64,7.23,7.23,0,0,1,2.28-8.39,2,2,0,0,0,.84-2.6c-.24-.71-.33-1.47-.5-2.2C722.07,522,722.07,522,719.84,522Zm10.41-14A10.19,10.19,0,0,0,719.5,497.8,10.26,10.26,0,1,0,730.25,508Zm-3.53,30.3a3.6,3.6,0,0,0,3.75-3.49,3.72,3.72,0,0,0-3.63-3.79,3.63,3.63,0,0,0-3.64,3.6A3.54,3.54,0,0,0,726.72,538.27ZM703.05,484.9a3.07,3.07,0,0,0-3.13-3.13,3.12,3.12,0,0,0-3.22,3.2c0,1.42,1.71,3.4,2.88,3.4A3.7,3.7,0,0,0,703.05,484.9Zm36.78,5.32a2,2,0,0,0-1.84-2,1.86,1.86,0,0,0-1.81,2,1.66,1.66,0,0,0,1.87,1.72A1.72,1.72,0,0,0,739.83,490.22Z"/>
<path class="cls-48" d="M696.19,529.79a3.2,3.2,0,0,1-3.11,3.22,3.39,3.39,0,0,1-3.26-3.14,3.32,3.32,0,0,1,3.25-3.29A3.18,3.18,0,0,1,696.19,529.79Z"/>
<path class="cls-48" d="M750.32,508.11a3.12,3.12,0,0,1-3.29,2.81c-.95,0-2.29-1.81-2.23-3a2.73,2.73,0,0,1,2.76-2.61A2.76,2.76,0,0,1,750.32,508.11Z"/>
<path class="cls-48" d="M730.25,508A10.28,10.28,0,1,1,719.5,497.8,10.24,10.24,0,0,1,730.25,508Z"/>
<path class="cls-48" d="M726.72,538.27a3.54,3.54,0,0,1-3.52-3.68,3.63,3.63,0,0,1,3.64-3.6,3.72,3.72,0,0,1,3.63,3.79A3.6,3.6,0,0,1,726.72,538.27Z"/>
<path class="cls-48" d="M703.05,484.9a3.7,3.7,0,0,1-3.47,3.47c-1.17,0-2.85-2-2.88-3.4a3.12,3.12,0,0,1,3.22-3.2A3.07,3.07,0,0,1,703.05,484.9Z"/>
<path class="cls-48" d="M739.83,490.22a1.72,1.72,0,0,1-1.78,1.66,1.66,1.66,0,0,1-1.87-1.72,1.86,1.86,0,0,1,1.81-2A2,2,0,0,1,739.83,490.22Z"/></a>
</g>
</svg>

SVG text shifted on Edge and IE

I have isolated a case where SVG text is shifted only on Microsoft browsers (EDGE & IE)
<svg width="360" height="186" viewBox="0 0 120 64" preserveAspectRatio="none">
<text font-size="72" font-family="Arial" fill="#ff2204" x="0" y="62" text-anchor="middle">
<tspan x="50%" dy="0">test</tspan>
</text>
</svg>
Is there a way to make the text centered as in other browsers?
Here's the sample code in jsfiddle

Removing the whitespace between </tspan> and </text> resolves the issue
<svg width="360" height="186" viewBox="0 0 120 64" preserveAspectRatio="none">
<text font-size="72" font-family="Arial" fill="#ff2204" x="0" y="62" text-anchor="middle">
<tspan x="50%" dy="0">test</tspan></text>
</svg>
jsfiddle

SVG text - one text left align and other text in same line has to be right align

I have the following items list and its prices to be displayed in SVG format.
Bottles ...........$5.00
Description of the bottles
Desktop accessories...........$25.00
Description of the Desktop accessories
Can anyone help me to layout the price at the right hand side of svgList as shown in the image also shown below.
Bottles ................................. $5.00
Description of the bottles
Desktop accessories........... $25.00
Description of the Desktop accessories
The SVG code is as follows :
<svg id=“svgList” width="816" height="400" class="myBGImage">
<g id="main">
<g id="subGroup01" class="group" transform="translate(20,100)" style="cursor: move; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<text alignment-baseline="baseline" text-anchor="start" data-type="itemtitle" id="itemtitle_h0f0" class="roboto_global fontSize_20g" stroke-width="2" color="#000000">
<tspan class="item" text-anchor="start" x="0" y="0">Bottles</tspan>
<tspan class="dots" text-anchor="start">...............</tspan>
<tspan class="price" text-anchor="start">$5.00</tspan>
<tspan class="item-desc" text-anchor="start" x="0" y="20">Description </tspan>
</text>
</g>
<g id="subGroup02" class="group" transform="translate(20,150)" style="cursor: move; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<text alignment-baseline="baseline" text-anchor="start" data-type="itemtitle" id="itemtitle_h0f1" class="roboto_global fontSize_20g" stroke-width="2" color="#000000">
<tspan class="item" text-anchor="start" x="0" y="0">Desktop accessories</tspan>
<tspan class="dots" text-anchor="start">...............</tspan>
<tspan class="price" text-anchor="start">$25.00</tspan>
<tspan class="item-desc" text-anchor="start" x="0" y="20">Description </tspan>
</text>
</g>
</g>
</svg>
Link to fiddle

You are using text-anchor="start", did you try text-anchor="end"?
That deals with the alignment issue. The only slightly tricky bit is how to do the variable width dots, without having to have to work out exactly how many dots you need to use in each case.
The approach I've used in my solution (see bottom example) is to use a dotted line.
<svg id="svgList" width="816" height="400" class="myBGImage">
<g transform="translate(20,100)">
<line x1="0" y1="0" x2="250" y2="0" stroke="black" stroke="1" stroke-dasharray="2 2"/>
<text class="item" text-anchor="start" x="0" y="0">Bottles</text>
<text class="price" text-anchor="end" x="250">$5.00</text>
</g>
</svg>
Then to hide the dots behind the text, we add an extra copy of the text behind the original text. Then we give that extra copy of the text a thick white stroke to hide the relevant section of the dotted line. It has the effect of a white "halo" around the text to obliterate the part of the dotted line behind our text.
In this little snippet, I've made the stroke/halo blue to show what's happening.
<svg id="svgList" width="816" height="400" class="myBGImage">
<g transform="translate(20,100)">
<line x1="0" y1="0" x2="250" y2="0" stroke="black" stroke="1" stroke-dasharray="2 2"/>
<use xlink:href="#row1" stroke="blue" stroke-width="6"/>
<g id="row1" fill="white">
<text class="item" text-anchor="start" x="0" y="0">Bottles</text>
<text class="price" text-anchor="end" x="250">$5.00</text>
</g>
<text class="item-desc" text-anchor="start" x="0" y="20">Description </text>
</g>
</svg>
The final result:
<svg id="svgList" width="816" height="400" class="myBGImage">
<g id="main">
<g id="subGroup01" class="group" transform="translate(20,100)" style="cursor: move; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<line x1="0" y1="0" x2="250" y2="0" stroke="black" stroke="1" stroke-dasharray="2 2"/>
<use xlink:href="#row1" stroke="white" stroke-width="4"/>
<g id="row1">
<text class="item" text-anchor="start" x="0" y="0">Bottles</text>
<text class="price" text-anchor="end" x="250">$5.00</text>
</g>
<text class="item-desc" text-anchor="start" x="0" y="20">Description </text>
</g>
<g id="subGroup02" class="group" transform="translate(20,150)" style="cursor: move; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<line x1="0" y1="0" x2="250" y2="0" stroke="black" stroke="1" stroke-dasharray="2 2"/>
<use xlink:href="#row2" stroke="white" stroke-width="4"/>
<g id="row2">
<text class="item" text-anchor="start" x="0" y="0">Desktop accessories</text>
<text class="price" text-anchor="end" x="250">$25.00</text>
</g>
<text class="item-desc" text-anchor="start" x="0" y="20">Description </text>
</g>
</g>
</svg>

Drawing a line after an arbitrary number of SVG tspan elements

I'd like to use SVG to create an XSLT template to generate PDFs of orders placed in a system. The idea is that I have N order positions (say between 3 and 10) which I want displayed row by row and with a horizontal line after the bottom-most row and the usual total row.
Here's is an illustration:
My problem is that I cannot find out how to position the horizontal line and the final total row relative the last order position row. Here's what I have so far:
http://jsfiddle.net/hg3hzd4j/
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="300" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(10, 15)">
<rect x="0" y="0" height="100%" width="100%" style="stroke:#000; fill: #FFFF00" fill-opacity="0.2" stroke-opacity="0.2"></rect>
<g transform="translate(10, 0)">
<line id="guide1" x1="160" y1="0" x2="160" y2="100%" style="stroke:rgb(255,0,0);stroke-width:1" />
<line id="guide2" x1="220" y1="0" x2="220" y2="100%" style="stroke:rgb(255,0,0);stroke-width:1" />
<g>
<text x="0" y="20">
<tspan>Mono layer</tspan>
<tspan x="100">$50</tspan>
<tspan x="160" style="text-anchor:end">4</tspan>
<tspan x="220" style="text-anchor:end">$200</tspan>
<tspan x="0" dy="20">Single layer</tspan>
<tspan x="100">$25</tspan>
<tspan x="160" style="text-anchor:end">3</tspan>
<tspan x="220" style="text-anchor:end">$75</tspan>
<tspan x="0" dy="20">Double layer</tspan>
<tspan x="100">$45</tspan>
<tspan x="160" style="text-anchor:end">3</tspan>
<tspan x="220" style="text-anchor:end">$135</tspan>
<tspan x="0" dy="20">Triple layer</tspan>
<tspan x="100">$65</tspan>
<tspan x="160" style="text-anchor:end">1</tspan>
<tspan x="220" style="text-anchor:end">$65</tspan>
<!-- I'd like a line here -->
<!-- And the grand total row -->
<tspan x="0" dy="30">Total</tspan>
<tspan x="100"></tspan>
<tspan x="160" style="text-anchor:end">11</tspan>
<tspan x="220" style="text-anchor:end">$475</tspan>
</text>
<line x1="0" y1="150" x2="100%" y2="150" style="stroke:rgb(0,0,0);stroke-width:2" />
</g>
</g>
</g>
</svg>
I'm by no means an expert so any suggestion is greatly appreciated. I thought I could define each position row with something similar to a DIV and that everything would shift down automatically. But obviously not.

Add the value the dy attribute of each order line to the y coordinate of the <text> element. That will get you the absolute Y position of the baseline of the last order line.
20 + (20 + 20 + 20) = 80.
Add an appropriate amount of extra padding to get you below the descenders of characters in the last row (eg. 10).
Then set the y1 and y2 coords of your line to the final value (90 in this example).
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="300" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(10, 15)">
<rect x="0" y="0" height="100%" width="100%" style="stroke:#000; fill: #FFFF00" fill-opacity="0.2" stroke-opacity="0.2"></rect>
<g transform="translate(10, 0)">
<line id="guide1" x1="160" y1="0" x2="160" y2="100%" style="stroke:rgb(255,0,0);stroke-width:1" />
<line id="guide2" x1="220" y1="0" x2="220" y2="100%" style="stroke:rgb(255,0,0);stroke-width:1" />
<g>
<text x="0" y="20">
<tspan>Mono layer</tspan>
<tspan x="100">$50</tspan>
<tspan x="160" style="text-anchor:end">4</tspan>
<tspan x="220" style="text-anchor:end">$200</tspan>
<tspan x="0" dy="20">Single layer</tspan>
<tspan x="100">$25</tspan>
<tspan x="160" style="text-anchor:end">3</tspan>
<tspan x="220" style="text-anchor:end">$75</tspan>
<tspan x="0" dy="20">Double layer</tspan>
<tspan x="100">$45</tspan>
<tspan x="160" style="text-anchor:end">3</tspan>
<tspan x="220" style="text-anchor:end">$135</tspan>
<tspan x="0" dy="20">Triple layer</tspan>
<tspan x="100">$65</tspan>
<tspan x="160" style="text-anchor:end">1</tspan>
<tspan x="220" style="text-anchor:end">$65</tspan>
<!-- I'd like a line here -->
<!-- And the grand total row -->
<tspan x="0" dy="30">Total</tspan>
<tspan x="100"></tspan>
<tspan x="160" style="text-anchor:end">11</tspan>
<tspan x="220" style="text-anchor:end">$475</tspan>
</text>
<line x1="0" y1="90" x2="100%" y2="90" style="stroke:rgb(0,0,0);stroke-width:2" />
</g>
</g>
</g>
</svg>

Resources