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

Question

我正在通过手动编码 svgs 做出一些指示。我已经使用 100x100 正方形中的点定义了一个多边形，并通过设置外部 SVG 元素的宽度和高度属性获得了我想要的纵横比。这是图形的 jsfiddle：http: //jsfiddle.net/62WpR/。

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

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

Answer 1

解决了它。

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

我还明智地使用了 preserveAspectRatio 属性来使图像保持相同的纵横比。我只在 CSS 中设置宽度：http: //jsfiddle.net/62WpR/3/

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