Created
September 25, 2012 07:16
-
-
Save QB/3780421 to your computer and use it in GitHub Desktop.
SVG で路線図を描いてみた。 PHP で動的に生成してるので編集も簡単。伸ばしたり、配色変えたり、色々と応用すればイラレ顔負けの路線図だって作れるかも。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" standalone="no" encoding="UTF-8"?> | |
<!--?xml-stylesheet type="text/css" href=".css"?--> | |
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | |
<svg width="1000" height="1200" viewBox="0 0 1000 1200" xmlns="http://www.w3.org/2000/svg"> | |
<style type="text/css"><![CDATA[ | |
text{ | |
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif; | |
text-anchor:middle; | |
fill:black; | |
} | |
.text{ | |
stroke-width:1; | |
stroke:black; | |
font-size:18px; | |
} | |
.label{ | |
stroke-width:1; | |
stroke:black; | |
font-size:22px; | |
} | |
.box{ | |
fill:white; | |
stroke:black; | |
stroke-width:2; | |
} | |
.line{ | |
fill:black; | |
} | |
]]></style> | |
<!--rect x="0" y="0" fill="#ccc" width="100%" height="100%" /--> | |
<!-- x座標100-300の領域で描画 --> | |
<?php | |
define("NORMAL",$_GET["a"]);//駅名ボックスを入れる部分に突っ込む追加幅 | |
define("SPACE",$_GET["b"]);//「種別を示す線」同士の間隔 | |
define("BOX_WIDTH",$_GET["c"]);//駅名表に盛りたい左右それぞれの幅 | |
define("MARGIN_LEFT",$_GET["d"]);//左側の余白 | |
function str($s){ | |
return (string) $s; | |
} | |
function m($s){//自然数で表現した種別をx座標に直す | |
if($s==1) return ($s-1/2)*SPACE + MARGIN_LEFT /*+ NORMAL/2*/; | |
else return ($s-1/2)*SPACE + MARGIN_LEFT + NORMAL; | |
} | |
function n($s){ | |
return $s*60 + 80;//自然数で表現した段数を実際の高さに直す | |
} | |
function line($position,$wid,$text_label){ | |
$position = m($position); | |
$text_x = str($position); | |
$rect_x = str($position- $wid/2); | |
$rect_width = str($wid); | |
echo '<g><text x="'.$text_x.'" y="90" class="label">'.$text_label.'</text>' | |
.'<rect class="line" x="'.$rect_x.'" y="100" width="'.$rect_width.'" height="900" /></g>'."\n"; | |
} | |
function station($height,$size,$name){ | |
$height = n($height); | |
$rect_x = str(MARGIN_LEFT-BOX_WIDTH); | |
$rect_y = str($height-25); | |
$rect_width = str(SPACE*($size-1)+2*BOX_WIDTH + NORMAL); | |
$rect_height = str(40); | |
$text_x = str(($size-1)*SPACE/2+MARGIN_LEFT + NORMAL/2); | |
$text_y = str($height); | |
$radius = str(10); | |
echo '<g><rect class="box" x="'.$rect_x.'" y="'.$rect_y.'" width="'.$rect_width | |
.'" height="'.$rect_height.'" rx="'.$radius.'" />' | |
.'<text x="'.$text_x.'" y="'.$text_y.'" class="text">'.$name.'</text></g>'."\n"; | |
} | |
$n=1; | |
line($n++,4,"普通"); | |
line($n++,4,"エアポート快特"); | |
line($n++,6,"アクセス特急"); | |
$n=1; | |
station($n++,4,"泉岳寺"); | |
station($n++,3,"三田"); | |
station($n++,3,"大門"); | |
station($n++,3,"新橋"); | |
station($n++,2,"東銀座"); | |
station($n++,2,"宝町"); | |
station($n++,3,"日本橋"); | |
station($n++,2,"人形町"); | |
station($n++,3,"東日本橋"); | |
station($n++,2,"浅草橋"); | |
station($n++,2,"蔵前"); | |
station($n++,3,"浅草"); | |
station($n++,2,"本所吾妻橋"); | |
station($n++,4,"押上"); | |
?> | |
</svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment