首页 文章

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

提问于
浏览 次
0

我正在手工编写svgs编写指针 . 我使用100x100平方的点定义了一个多边形，并通过设置外部SVG元素的宽度和高度属性获得了我想要的宽高比 . 这是图形的jsfiddle：http://jsfiddle.net/62WpR/ .

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

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

svg

1 回答

  • 0

    解决了它的种类 .

    通过将视图框设置为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>​
    回复于

相关问题