I'm seeking to draw a grid onto which i will be adding a number of simple rectangles, again using SVG. The grid should fit on a single page when viewed in a browser. Suspect i'm missing something very simple but do i code the SVG (viewport and grid) for this outcome; namely a grid? I've read advice to specify a viewbox that defines the internal coordinate system of the document's canvas; also that it's possible to set height and width attributes as percentages (?). Ideally final result (ultimately a map) is to have gridlines.
4
-
Draw how? Do you mean with javascript? Is there a reason for that? Why not just draw it up in an SVG editor like Inkscape (with snap to grid turned on etc).– Paul LeBeauCommented Feb 25, 2014 at 13:00
-
The exercise also involves plotting a few points on the grid - requiring an SVG transform of these geographic objects (which are in a geographic coordinate system and not the opposite graphics coordinates system). These coordinates are all fed in from an Oracle spatial d/b. So, it's more of a dynamic map that is the desired output, not a static one.– user3350958Commented Feb 25, 2014 at 13:34
-
See this recent post, it may be helpful:stackoverflow.com/questions/21915059/…– Francis HemsherCommented Feb 25, 2014 at 17:53
-
Where is your code? Edit the question to add it.– Robert LongsonCommented Dec 4, 2017 at 10:12
Add a comment
|
1 Answer
Use a pattern on a fully wide and high rectangle.
<svg width="800" height="600">
<defs>
<pattern id="tenthGrid" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="silver" stroke-width="0.5"/>
</pattern>
<pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
<rect width="100" height="100" fill="url(#tenthGrid)"/>
<path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-width="1"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)"/>
</svg>