SVG图像预览问题

我的ionic 1应用程序中有一个编辑器，可以使用它创建SVG图像

以下是SVG图像：

但当我在应用程序中显示相同的图像时

<ion-view>
    <ion-content>
        <img src= "img.svg">
    </ion-content>
</ion-view>

它看起来像：

文本向左移动了。问题是什么

编辑：SVG图像：

            <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>

背景
第一层
标签是
或用于测试
测试课文

我认为问题在于，您正在相对于前一行文本的结尾定位每一行文本。移动浏览器的字体渲染引擎只需稍有不同，就可以得到一行或两行短或长的文本。这意味着下一条线的起点将在一个稍有不同的地方结束

如果这是一个问题，那么您应该能够通过为每行文本设置一个特定的开始

x

，而不是使用

dx

，来避免它

试试这个版本的文件，看看是否更好

背景
第一层
标签是
或用于测试
测试课文

SVG渲染错误的图片很有用。但我们只能猜测它到底出了什么问题。发布SVG的内容。您在哪些设备上进行了测试？它在所有东西上都显示错误吗？SVG在桌面浏览器上是否也显示错误？请使用此编辑器输入代码，或许我可以提供帮助you@PaulLeBeau它在浏览器上看起来不错，但在android和ios上就不行了tablets@PaulLeBeau请参见编辑