如何获得正确的SVG尺寸/纵横比？

我正在用手工编码SVG来做一些指示。我使用100x100正方形中的点定义了一个多边形，并通过设置外部SVG元素的宽度和高度属性获得了所需的纵横比。下面是一个JSFIDLE图形：

不幸的是，文本正在被宽度和高度属性压缩。有没有办法在不压缩文本的情况下使用它们，或者做一些愚蠢的事情，比如对其应用转换

如果这是不可能的，我想我将不得不用我想要的最终纵横比在坐标空间中定义路径。令人失望。

解决了这个问题

通过将viewbox设置为1:2的比例，并在svg中的两个多边形上使用变换，我能够获得我想要的尺寸。只要CSS中的尺寸设置为2:1的比例，图形就会显示正确

我还明智地使用了preserveSpectratio属性，以保持图像的纵横比相同。我只是在CSS中设置宽度：

999
​

<svg baseProfile="full" contentScriptType="text/ecmascript" contentStyleType="text/css" id="svg" preserveAspectRatio="xMinYMin meet" version="1.2" viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(1 .5)" stroke-linejoin="bevel" stroke="black">
       <polygon vector-effect="non-scaling-stroke" fill="#666" id="tab" points="20.0,95.0 5.0,50.0 20.0,5.0 90.0,5.0 95.0,15.0 95.0,85.0 90.0,95.0"></polygon>
       <polygon vector-effect="non-scaling-stroke" fill="#FFEA00" id="insert" points="25.0,95.0 10.0,50.0 25.0,5.0" visibility="visible"></polygon>
  </g>                                    
  <text fill="white" font-size="30" text-anchor="middle" x="60" y="36">999</text>
</svg>​