SVG文件中的jpg图像<img/>在某些iPad上被错误地调整大小

时间:2014-11-06 21:13:56

标签: image ipad svg jpeg raster

如何在SVG文件的<image>标记内对jpg图像进行操作,在iPad Mini上错误地调整大小?

我有一个包含复杂SVG文件的网页。此SVG包含jpg图像(栅格)作为<image>标记(用作背景),以及许多<circle><text>元素(矢量)。在某些iPad上,jpg图像调整不当,与正确显示的矢量元素不同步。在计算机或iPhone上,它正确显示。

[编辑:请参阅下面有关哪些型号存在问题的说明...]

整个过程意味着按比例放大,以便人们可以放大和缩小,并且矢量元素可以使用背景光栅图像调整大小。只有在iPad上它们才能正确显示。

型号:

iPad 1(和2?):好的 iPad Air 1:好的 iPad Air 2:图像问题

iPad Mini 1:图像问题 iPad Mini 2:好的 iPad Mini 3:图像问题

比较计算机与有问题的iPad版本的比较: http://bestofyourtown.com/test/

HTML:

<div class="mapplic-map-image">
<svg 
    xml:space="preserve" 
    enable-background="new 0.5 890.5 5954 3705" 
    viewBox="0.5 890.5 5954 3705" 
    y="0px" 
    x="0px" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns="http://www.w3.org/2000/svg" 
    id="layer_1" version="1.1">
<image 
    transform="matrix(1 0 0 1.0002 0.4971 890.498)" 
    xlink:href="http://bestofyourtown.com/svgbgs/downtown-high.jpg" 
    id="downtown-4-mapplic_1_" 
    height="3705" width="5954" overflow="hidden">
</image>
<g id="shopping">
<a xlink:href="#56" id="_x35_6">
    <circle r="43.718" cy="2189.552" cx="4243.234" id="_x35_6_1_"/>
    <text font-size="49.9635" transform="matrix(1 0 0 1 4215.4473 2207.2461)">56</text>
</a>
<a xlink:href="#79n" id="_x37_9n">
    <circle r="43.718" cy="3000.219" cx="4147.234" id="_x37_9"/>
    <text font-size="49.9635" transform="matrix(1 0 0 1 4119.4473 3017.9131)">79</text>
</a>
[etc...]
</g>
<g id="attractions">
<a xlink:href="#59" id="_x35_9">
    <circle r="43.718" cy="1789.844" cx="4197.435" id="_x35_9_1_"/>
    <text font-size="49.9635" transform="matrix(1 0 0 1 4169.6484 1807.3281)">59</text>
</a>
<a xlink:href="#107" id="_x31_07">
    <circle r="43.718" cy="1897.855" cx="1406.146" id="_x31_07_1_"/>
    <text font-size="49.9635" transform="matrix(1 0 0 1 1362.3594 1916.3389)">107</text>
</a>
[etc…]
</g>
</svg>
</div>

任何建议都赞赏!

0 个答案:

没有答案