Question

我正在为网站创建HTML5网格。网格看起来像我想要的那样，但是在每个“大”方块中，有10个较小的方块。我需要在每个“大”方块中只有5个方格。我不熟悉HTML5，也不确定如何提出问题，希望有人理解我在这里要做的事情。

这是网站：http://www.webexplosive.com/sms_test/piermap.html

，HERE是我的网格代码：

<div style="width: 902px; height: 602px; position: absolute; left: 0px; top: 86px;">
   <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
   <pattern id="minorGrid" width="10" height="10" patternUnits="userSpaceOnUse">
      <path d="M 10 0 L 0 0 0 10" fill="none" stroke="#FF4444" stroke-width="0.5"/>
   </pattern>
   <pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
     <rect width="100" height="100" fill="url(#minorGrid)"/>
     <path d="M 100 0 L 0 0 0 100" fill="none" stroke="red" stroke-width="4"/>
   </pattern>
</defs>

      <rect width="100%" height="100%" fill="url(#grid)" />
   </svg>
</div>

Answer 1

看看这个： http://jsfiddle.net/cBXER/

<div style="width: 902px; height: 602px; position: absolute; left: 0px; top: 86px;">
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <pattern id="minorGrid" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#FF4444" stroke-width="0.5"/>
            </pattern>
            <pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
                <rect width="100" height="100" fill="url(#minorGrid)"/>
                <path d="M 100 0 L 0 0 0 100" fill="none" stroke="red" stroke-width="4"/>
            </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />
    </svg>
</div>

您需要将次要网格宽度，高度和路径d值更改为20，因为20是100的五分之一。

HTML5网格大小调整

1 个答案: