Question

我的离子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>

Answer 1

我认为问题在于您将每行文本定位为相对于上一行文本的结束。只需要在移动浏览器的字体渲染引擎中稍微有所不同，最终文本行可以是一个或两个更短或更长的像素。这意味着下一行的开头会在一个稍微不同的地方结束。

如果这是问题，那么您应该可以通过为每行文字设置特定的开始x来避免它，而不是使用dx。

尝试使用此版本的文件，看看它是否更好。

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

SVG图像预览问题

1 个答案: