css - 如何在没有 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>

请看这个jsfiddle:http://jsfiddle.net/Fz4rc/

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

我研究了一些有关 SO 的相关问题。 我尝试过使用 viewBox、preserveAspectRatio、宽度、高度。

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

Answer 1

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