为什么Chrome上的SVG文本会切断文字？

I have a Logo for my new website.

我的新网站有一个Logo。

The logo looks great in Firefox but as you can see the S on Tomorrow's is cut off in Chrome. Why is this?

Firefox中的徽标看起来很棒但是你可以看到明天的S在Chrome中被切断了。为什么是这样?

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>

1 个解决方案

#1

DEMO I'm no expert in SVG but After Researching a bit ViewBox is

演示我不是SVG的专家,但研究了一下ViewBox后

viewBox as the "real" coordinate system, it is the coordinate system used to draw the SVG graphics onto the canvas Yo can specify coordinate to viewbox attribute

viewBox作为“真实”坐标系,它是用于将SVG图形绘制到画布上的坐标系Yo可以指定坐标到viewbox属性

Source MDN ViewBox Source ViewBox

源MDN ViewBox源ViewBox

~~what i came up when i set viewbox width and height to 100% 100% S was visible in chrome as well~~

当我将viewbox的宽度和高度设置为100%时,我想出了什么?在chrome中也可以看到100%S

Update
well percentage is supported in viewport(i.e width and height) but not in viewbox,better not put viewbox and viewport unless needed (viewport: width=100% and height=100% will not harm the output)

视口中支持更新井百分比(即宽度和高度),但不在视口框中,除非需要,否则最好不要放置视口和视口(视口:宽度= 100%,高度= 100%不会损害输出)

New DEMO

Example

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

#1