如何在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>
任何建议都赞赏!