為什么Chrome上的SVG文本會切斷文字？

Question

我的新網站有一個Logo。

Firefox中的徽標看起來很棒但是你可以看到明天的S在Chrome中被截斷了。 為什么是這樣？

http://jsfiddle.net/pro5Lgfx/

 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> 

Answer 1

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

viewBox作為“真實”坐標系，它是用於將SVG圖形繪制到畫布上的坐標系Yo可以指定坐標到viewbox屬性

源MDN ViewBox源ViewBox

當我將viewbox的寬度和高度設置為100％時，我想出了什么？在chrome中也可以看到100％S

更新
視口中支持井百分比（即寬度和高度）但不在視口框中，除非需要，否則最好不要放置視口和視口（視口：寬度= 100％，高度= 100％不會損害輸出）

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

 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>