Trouble with getting correct viewbox SVG

StackOverflow https://stackoverflow.com/questions/14879867

  •  09-03-2022
  •  | 
  •  

Question

I am trying to plot some points with svg. They are x,y co-ordinates with a small range: 

57.206116   -6.223032
57.2225 -6.2441702
57.233299   -6.1833301
57.246666   -6.210278
57.208561   -6.2244201

When they are plotted they are obviously very small on the screen. This is my viewbox command:

print qq(
<svg width="20cm" height="20cm" viewBox="57 -7 3 3">);

How do I refine this so it shows them clearly within the 20 x 20cm box. 

#!/usr/bin/perl
use DBI;
use CGI::Carp qw(fatalsToBrowser);

#Set content type
print "Content-Type: image/svg-xml\n\n";

#Establish connection to database
$dbh = DBI->connect ('dbi:Oracle:geosgen','user','pass')
|| die "Man down! Man down!: $DBI::errstr";

#Send SQL query for finds
$sth1 = $dbh->prepare("select table_alias.mot.sdo_point.X, table_alias.mot.sdo_point.Y 
from   x.mounts table_alias");

$sth1->execute;


#Set content type
print qq(<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" 
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">);



print qq(<svg width="20cm" height="20cm" viewBox="57 -7 3 3">);


while (@data = $sth1->fetchrow_array()) {
print qq(
<g transform="scale(1,-1)">
<circle cx="$data[0]" cy="$data[1]" r="0.01" fill="green">
</circle>   
</g>
       );   
  }

print qq();

Was it helpful?

Solution

I tried a little bit with your code.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<body>  
<div id="test">
<svg width="20cm" height="20cm" viewBox="57 -7 3 3" >

<rect x="57" y="-7" width="3" height="3" fill="none" stroke="black" stroke-width="0.01px" />

<g >

<circle cx="57.206116" cy="-6.223032" r="0.01" fill="green"></circle>   
<circle cx="57.2225" cy="-6.2441702" r="0.01" fill="red"></circle>   
<circle cx="57.233299" cy="-6.1833301" r="0.01" fill="blue"></circle>   
</g>

</svg>

</div>
</body>

and I removed the scale and added a rectangle to see where we are.

Thats my result: enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top