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>

请参阅此jsfiddle：http://jsfiddle.net/Fz4rc/

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

我已经研究了几个关于SO的相关问题。我尝试过使用viewBox，preserveAspectRatio，width，height。

如何在不测量javascript中的BBox的情况下，让两个路径都适合40px大小（svg或div）？有可能吗？

Answer 1

SVG容器的width和height属性定义容器的大小。 viewBox属性定义了容器中可见的SVG图形部分。要使两个路径都符合40px大小，您需要将width和height设置为40px并设置viewBox的参数，使其定义的矩形包含整个形状。如果您最初不知道形状的大小，我认为您无法避免使用getBBox()或其他类似的东西。您的演示具有更正的值：http://jsfiddle.net/Fz4rc/1/

如何在不使用javascript的情况下将svg路径适合某些px大小

1 个答案: