如何获得正确的SVG尺寸/高宽比？

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

不幸的是，文本正在被宽度和高度属性压缩。有没有什么办法可以在不压缩文本的情况下使用这些文件，或者像对其应用转换一样愚蠢？

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

来源

2012-09-14 Jehan

解决了它的一种。

通过将视框设置为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>

来源

2012-09-15 17:29:58 Jehan

如何获得正确的SVG尺寸/高宽比？

回答

相关问题