【发布时间】：2014-09-29 19:11:18
【问题描述】：
我使用 Inkscape 生成了 SVG 图像。该图像似乎在桌面浏览器中按预期呈现。在移动设备上，它在右侧被切断，并且 SVG 内的元素的位置被关闭。
这是 Inkscape 生成的 SVG 代码：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 216 40"
preserveAspectRatio="xMidYMid meet"
id="svg2"
version="1.1"
inkscape:version="0.48.5 r10040"
width="100%"
height="100%"
sodipodi:docname="Blisscount.svg">
id="svg2"
version="1.1"
inkscape:version="0.48.5 r10040"
sodipodi:docname="Blisscount.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.959798"
inkscape:cx="108.05012"
inkscape:cy="13.083765"
inkscape:document-units="px"
inkscape:current-layer="g2989"
showgrid="true"
inkscape:snap-grids="false"
inkscape:window-width="1024"
inkscape:window-height="706"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
showguides="true"
inkscape:guide-bbox="true">
<inkscape:grid
type="xygrid"
id="grid3762"
empspacing="5"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true" />
</sodipodi:namedview>
/>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="block"
transform="translate(0,-60)" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1012.3622)"
style="display:inline">
<g
id="g2989">
<g
id="g3039">
<text
xml:space="preserve"
style="font-size:50px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#333333;fill-opacity:1;stroke:none;font-family:Calibri;-inkscape-font-specification:Calibri"
x="37.767944"
y="1049.1346"
id="text2985"
sodipodi:linespacing="125%">lisscount </text>
<g
id="g3013">
<rect
y="1012.3622"
x="0"
height="40"
width="40"
id="rect3760"
style="fill:#0079c1;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<text
xml:space="preserve"
style="font-size:50px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Calibri;-inkscape-font-specification:Calibri"
x="5.3881836"
y="1048.1581"
id="text3012"
sodipodi:linespacing="125%">B</text>
</g>
</g>
</g>
</g>
</svg>
它应该是这样的：
Inkscape 环境中的屏幕截图。
-
来自 Firefox 环境的屏幕截图。
-
这就是它在移动浏览器上的样子。
这是我正在使用的 HTML：
<a id="logo_container" href="index.php">
<object class="main_title" data="../global/img/Blisscount.svg" type="image/svg+xml">
<img src="../global/img/Blisscount.png" alt="Blisscount" />
</object>
</a>
这是 CSS：
#logo_container {
height: 50px;
width: 216px;
position: relative;
display: inline-block;
z-index: 1;
font-size: 50px;
line-height: 40px;
}
.main_title {
height: 100%;
width: 100%;
z-index: -1;
vertical-align: middle;
pointer-events: none;
font-size: 50px;
line-height: 40px;
cursor: pointer;
}
【问题讨论】：
-
您是否尝试过：
<div id="mySvg"><svg ...>...</svg></div>- 而不是将其嵌入到对象中？ - 喜欢codepen.io/anon/pen/dEqeu?editors=100 -
我没有尝试过，因为 svg 文件太长了。为什么会有所作为？
-
只是想知道移动浏览器在呈现
<object>标记时是否存在问题。就这样。我正在再次查看您的 CSS，看起来您的字体大小和行高可能相互勾结（在<a>标记或<object>标记中。 -
啊，我明白了.. 我会试一试的。我已经广泛测试了css。绝对不是那样。我只是尝试删除其中一种字体设置，但没有任何区别。一旦我尝试直接放入 SVG，我会回复你
-
另一件事是，如果您查看我提供的图像，看起来移动浏览器正在使用更大的字体或类似的东西呈现文本。可能是不同的字体，因为“i”上的点看起来是方形的，而桌面版本是圆形的