为什么在Chrome浏览器中SVG文本会被截断？

Question

为什么在Chrome浏览器中SVG文本会被截断？

3

我为我的新网站设计了一个标志。

这个标志在Firefox中看起来很棒，但是你可以看到在Chrome中Tomorrow's的S被截断了。为什么会这样呢？

body {
  background:black
}

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="195px" height="53px" viewBox="0 0 195 53" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <title>Logo</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Your-Score" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="Desktop-Your-Score" sketch:type="MSLayerGroup" transform="translate(-23.000000, -24.000000)" font-weight="normal" font-family="Gill Sans" letter-spacing="1.16666663" font-size="28" sketch:alignment="middle" fill="#FFFFFF">
            <g id="Header" sketch:type="MSTextLayer">
                <g id="Primary-Nav-[home]-Copy">
                    <g id="Logo" transform="translate(23.000000, 18.000000)">
                        <text id="TOMORROW’S">
                            <tspan x="0.0328778028" y="26">TOMORROW’S</tspan>
                            <tspan x="36.2975262" y="58">SCORE</tspan>
                        </text>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

- michaelmcgurk

这取决于字体。在我的电脑上，Seamonkey 显示的是 Tomorrow`（没有 S），而 Chromium 则只有 Tomorrow 没有撇号。并且，在两个浏览器中，第一行的顶部都被剪掉了。 - Mr Lister

哎呀，有没有更好的方法可以在更多平台/系统上解决这个问题？我真想只导出为PNG文件 :-D - michaelmcgurk

1

为什么你不使用纯文本？你为什么需要 svg？ - Mosh Feu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CY5 · Accepted Answer

演示我不是SVG专家，但在研究一些内容后，ViewBox是

ViewBox作为“真实”的坐标系，它是用于将SVG图形绘制到画布上的坐标系。您可以指定要查看的坐标到viewbox属性。

来源MDN ViewBox 来源ViewBox

~~当我将viewbox宽度和高度设置为100％100％时，S在chrome中也是可见的~~

更新
虽然视口（即宽度和高度）支持百分比，但viewbox不支持，除非需要（viewport：width = 100％和height = 100％不会损害输出）

新演示

例子

 <svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

body {
  background: black
}

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg version="1.1" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
  <title>Logo</title>
  <desc>Created with Sketch.</desc>
  <defs></defs>
  <g id="Your-Score" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
    <g id="Desktop-Your-Score" sketch:type="MSLayerGroup" transform="translate(-23.000000, -24.000000)" font-weight="normal" font-family="Gill Sans" letter-spacing="1.16666663" font-size="28" sketch:alignment="middle" fill="#FFFFFF">
      <g id="Header" sketch:type="MSTextLayer">
        <g id="Primary-Nav-[home]-Copy">
          <g id="Logo" transform="translate(23.000000, 18.000000)">
            <text id="TOMORROW’S">
              <tspan x="0.0328778028" y="27">TOMORROW’S</tspan>
              <tspan x="36.2975262" y="58">SCORE</tspan>
            </text>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>