Question

我使用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=&quot;svg2&quot;
    version=&quot;1.1&quot;
    inkscape:version=&quot;0.48.5 r10040&quot;
    sodipodi:docname=&quot;Blisscount.svg&quot;&gt;

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


/&gt;
    <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环境的屏幕截图。

-

Firefoxs环境中的屏幕截图。

-

这就是移动浏览器的样子。

这是我正在使用的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;
}

Answer 1

看起来移动浏览器不支持字体系列Calibri，因此将SVG文本呈现为Arial。 Arial是一个更大的字体，它解释了右侧切断的文字和字母＆＃39; B＆＃39;被错过了对齐。

Answer 2

看看SVG的内容，我看到使用Calibri字体...也许你的移动浏览器没有它（这也是为什么＆＃39;我看起来如此正方形）

Answer 3

问题确实是字体丢失。

解决方案是将您的文本转换为SVG路径。例如，在Inkscape中，您将选择文本并转到path-> Object to path（或 shift + command + c ）< / p>

如果这样做不行，请搜索“ <您的SVG编辑器>要概述的文本”

SVG无法在移动浏览器中按预期呈现

3 个答案: