Question

我的新网站有一个徽标。

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

＆＃13;

body {
  background:black
}

＆＃13;

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

＆＃13;

Answer 1

DEMO 我不是SVG的专家，但研究了一下ViewBox

viewBox as＆＃34; real＆＃34;坐标系，它是坐标系用于在画布上绘制SVG图形Yo可以指定坐标到视图框属性

来源MDN ViewBox来源ViewBox

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

<强>更新
视口中支持井百分比（即宽度和高度）但不在视口框中，除非需要，否则最好不要放置视口和视口（视口：宽度= 100％，高度= 100％不会损害输出）

New DEMO

示例

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

＆＃13;

body {
  background: black
}

＆＃13;

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

＆＃13;

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

1 个答案: