如果没有javascript，我如何将svg路径与特定的px大小相匹配？

Question

<div style="width:40px;
            height:40px;
            background: #333333;
            margin: 10px;">

    <svg version="1.1" 
         xmlns="http://www.w3.org/2000/svg" 
         width="40" 
         height="40" 
         style="width:40px; 
         height:40px;" 
         viewBox="0 0 40 40" 
         preserveAspectRatio="none">

         <g transform="translate(20, 20)">
             <path fill="#FF0000" stroke="none" d="M-10,-10h20v20h-20z"></path>
         </g>
</svg>
</div>

请看这个小玩意：http://jsfiddle.net/Fz4rc/

第一条路太小，第二条路太大。

我曾就此事研究过几个相关的问题。我试过玩viewBox，preserveAspectRatio，宽度，身高。

在不测量javascript中的BBox的情况下，如何使这两种路径都适合40 or大小( svg或div)？有可能吗？

Answer 1

SVG容器的width和height属性定义容器的大小。viewBox属性定义了SVG绘图中将在容器中可见的部分。要获得符合40px大小的两条路径，您需要将width和height设置为40px，并设置viewBox的参数，以便它定义的矩形包含整个形状。如果你一开始不知道你的形状大小，我认为你不能避免使用getBBox()或其他类似的东西。带有校正值的演示程序：http://jsfiddle.net/Fz4rc/1/