SVG ではじめる Web Graphics 2015 版
問題に対する SVG ファイルの例
(情報メディア演習 I)
平成 27 年 4 月 19 日改訂
2
第2章
問題 2.7(23 ページ) カフェウォール錯視
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>カフェウォール錯視</title>
<defs>
<rect id="LineH" x="-20" y="-2" width="510" height="2" fill="black"/>
<rect id="Square" x="0" y="0" width="50" height="50" fill="black"/>
<g id="unit">
<g transform="translate(0,0)"><use xlink:href="#Square"/></g>
<g transform="translate(100,0)"><use xlink:href="#Square"/></g>
<g transform="translate(200,0)"><use xlink:href="#Square"/></g>
<g transform="translate(300,0)"><use xlink:href="#Square"/></g>
<g transform="translate(400,0)"><use xlink:href="#Square"/></g>
</g>
<g id="unit2" transform="translate(20,0)"><use xlink:href="#unit"/></g>
</defs>
<g transform="translate(50,50)"><use xlink:href="#unit"/></g>
<g transform="translate(50,102)"><use xlink:href="#unit2"/><use xlink:href="#LineH"/></g>
<g transform="translate(50,154)"><use xlink:href="#unit"/><use xlink:href="#LineH"/></g>
<g transform="translate(50,206)"><use xlink:href="#unit2"/><use xlink:href="#LineH"/></g>
<g transform="translate(50,258)"><use xlink:href="#unit"/><use xlink:href="#LineH"/></g>
</svg>
問題 2.10(28 ページ) デルブーフの錯視
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>デルブーフの錯視</title>
<defs>
<circle cx="0" cy="0" id="LCircle" r="60" stroke-width="4" stroke="black" fill="none" />
<circle cx="0" cy="0" id="SCircle" r="40" stroke-width="4" stroke="black" fill="none" />
</defs>
<g transform="translate(50,100)">
<use xlink:href="#SCircle"/>
<g transform="translate(170,0)">
<use xlink:href="#SCircle"/>
<use xlink:href="#LCircle"/>
</g>
<g transform="translate(350,0)"><use xlink:href="#LCircle"/></g>
</g>
</svg>
問題 2.11(30 ページ) マッハバンド錯視
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>マッハバンド錯視</title>
. 第2章
<defs>
<linearGradient id="Gradient"
gradientUnits="objectBoundingBox">
<stop stop-color="#C0C0C0" offset="0%"/>
<stop stop-color="#C0C0C0" offset="30%"/>
<stop stop-color="#080808" offset="70%"/>
<stop stop-color="#080808" offset="100%"/>
</linearGradient>
</defs>
<rect x="10" y="10" width="400" height="200" fill="url(#Gradient)" />
</svg>
問題 2.12(30 ページ) ザバーニョの錯視
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>ザバーニョの錯視</title>
<defs>
<linearGradient id="Gradient1" gradientUnits="objectBoundingBox">
<stop stop-color="black" offset="0%"/>
<stop stop-color="white" offset="100%"/>
</linearGradient>
<rect id="R" x="-175" y="-25" width="150" height="50"
stroke-width="4" stroke="none" fill="url(#Gradient1)" />
<g id="Unit">
<use xlink:href="#R"/>
<g transform="rotate(90)"><use xlink:href="#R"/></g>
<g transform="rotate(180)"><use xlink:href="#R"/></g>
<g transform="rotate(270)"><use xlink:href="#R"/></g>
</g>
</defs>
<g transform="translate(250,200)"><use xlink:href="#Unit"/></g>
<g transform="translate(650,200)">
<rect x="-175" y="-175" width="350" height="350" fill="lightgray" stroke="none"/>
<use xlink:href="#Unit"/>
</g>
</svg>
問題 2.14(32 ページ) コフカリング
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>コフカリング</title>
<defs>
<linearGradient id="Gradient1" gradientUnits="objectBoundingBox">
<stop stop-color="white" offset="0%">
<animate attributeName="stop-color" attributeType="CSS"
from="gray" to="white" dur="10s" fill="freeze" />
</stop>
<stop stop-color="gray" offset="100%"/>
</linearGradient>
</defs>
3
4
<g transform="translate(140,120)">
<rect x="0" y="-100" width="100" height="200" fill="black" />
<circle cx="0" cy="0" r="60" stroke-width="10" stroke="gray" fill="none"/>
<rect x="-15" y="-100" width="30" height="200" fill="url(#Gradient1)" />
</g>
</svg>
問題 2.15(32 ページ) ひし形を用いたクレイク・オブライエン効果
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>ひし形を用いたクレイク・オブライエン効果</title>
<defs>
<polygon id="diamond" points="0,100 50,0 100,100 50,200"
fill="url(#grad)" stroke="black" stroke-width="3"/>
<linearGradient id="grad"
x1="0" y1="0" x2="0" y2="200" gradientUnits="userSpaceOnUse">
<stop stop-color="white" offset="0%"/>
<stop stop-color="darkgray" offset="100%"/>
</linearGradient>
<g id="line5">
<use xlink:href="#diamond"/>
<use x="100" xlink:href="#diamond"/>
<use x="200" xlink:href="#diamond"/>
<use x="300" xlink:href="#diamond"/>
<use x="400" xlink:href="#diamond"/>
</g>
<g id="line6">
<use xlink:href="#line5"/>
<use x="-100" xlink:href="#diamond"/>
</g>
</defs>
<g transform="translate(100,50)">
<use xlink:href="#line5"/>
<use x="50" y="100" xlink:href="#line6"/>
<use x="0" y="200" xlink:href="#line5"/>
<use x="50" y="300" xlink:href="#line6"/>
<use x="0" y="400" xlink:href="#line5"/>
</g>
</svg>
問題 2.17(39 ページ) クレイク・オブライエン効果
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>クレイク・オブライエン効果</title>
<defs>
<radialGradient id="radGradient" gradientUnits="objectBoundingBox">
<stop stop-color="white" offset="0%"/>
<stop stop-color="white" offset="30%"/>
. 第2章
5
<stop stop-color="black" offset="30%"/>
<stop stop-color="white" offset="60%"/>
<stop stop-color="white" offset="100%"/>
</radialGradient>
</defs>
<rect x="10" y="10" width="250" height="250"
stroke-width="4" stroke="black" fill="url(#radGradient)" />
</svg>
問題 2.19(42 ページ) ピラミッドの稜線
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>ピラミッドの稜線</title>
<defs>
<rect id="Base" x="0" y="0" width="180" height="180" stroke="black" stroke-width="3"/>
<g id="Unit" fill="none" stroke-width="10">
<rect x="15" y="15" width="150" height="150" stroke-opacity="0.1" />
<rect x="25" y="25" width="130" height="130" stroke-opacity="0.2"/>
<rect x="35" y="35" width="110" height="110" stroke-opacity="0.3" />
<rect x="45" y="45" width="90" height="90" stroke-opacity="0.4" />
<rect x="55" y="55" width="70" height="70" stroke-opacity="0.5"/>
<rect x="65" y="65" width="50" height="50" stroke-opacity="0.625"/>
<rect x="75" y="75" width="30" height="30" stroke-opacity="0.75"/>
<rect x="85" y="85" width="10" height="10" stroke-opacity="1"/>
</g>
<g id="Unit2" fill="none" stroke-width="10">
<rect x="15" y="15" width="150" height="150" stroke-opacity="0.25" />
<rect x="25" y="25" width="130" height="130" stroke-opacity="0.375"/>
<rect x="35" y="35" width="110" height="110" stroke-opacity="0.5" />
<rect x="45" y="45" width="90" height="90" stroke-opacity="0.6" />
<rect x="55" y="55" width="70" height="70" stroke-opacity="0.7"/>
<rect x="65" y="65" width="50" height="50" stroke-opacity="0.8"/>
<rect x="75" y="75" width="30" height="30" stroke-opacity="0.9"/>
<rect x="85" y="85" width="10" height="10" stroke-opacity="1"/>
</g>
</defs>
<g transform="translate(20,20)">
<rect x="0"
y="0"
width="180" height="180" fill="#FFFFFF"
stroke="black" stroke-width="3"/>
<rect x="10" y="10" width="160" height="160" fill="#FFE0E0" />
<rect x="20" y="20" width="140" height="140" fill="#FFC0C0" />
<rect x="30" y="30" width="120" height="120" fill="#FFA0A0" />
<rect x="40" y="40" width="100" height="100" fill="#FF8080" />
<rect x="50" y="50" width="80" height="80" fill="#FF6060" />
<rect x="60" y="60" width="60" height="60" fill="#FF4040" />
<rect x="70" y="70" width="40" height="40" fill="#FF2020" />
<rect x="80" y="80" width="20" height="20" fill="#FF0000" />
</g>
<g transform="translate(200,20)" stroke="red">
<use xlink:href="#Base" fill="white"/>
<use xlink:href="#Unit"/>
</g>
6
<g transform="translate(380,20)">
<use xlink:href="#Base" fill="darkred" />
<use xlink:href="#Unit2" stroke="white"/>
</g>
<g transform="translate(560,20)">
<use xlink:href="#Base" fill="navy" />
<use xlink:href="#Unit2" stroke="white"/>
</g>
</svg>
第3章
問題 3.1(44 ページ) 0.7 問題 3.2(44 ページ) まとまった図形をグラデーション
で図形を塗りつぶす
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>まとまった図形をグラデーションで図形を塗りつぶす</title>
<defs>
<linearGradient id="Grad" gradientUnits="userSpaceOnUse"
x1="-100" y1="0" x2="520" y2="0">
<stop stop-color="red"
offset="0%"/>
<stop stop-color="yellow" offset="100%"/>
</linearGradient>
</defs>
<g transform="translate(110,110)" id="fig" >
<g transform="scale(1,-1)" >
<polygon
points="0,100 -95.1,30.9 -58.8,-80.9 58.8,-80.9 95.1,30.9"
stroke="black" stroke-width="4" fill="url(#Grad)"/>
<polygon
points="210,100 151.2,-80.9 305.1,30.9 114.9,30.9 268.8,-80.9"
stroke="black" stroke-width="4" fill="url(#Grad)"/>
<polygon
points="420,100 361.2,-80.9 515.1,30.9 324.9,30.9 478.8,-80.9"
stroke="black" stroke-width="4" fill-rule="evenodd"
fill="url(#Grad)"/>
</g>
<rect x="-100" y="120" width="620" height="50" fill="url(#Grad)"
stroke-width="4" stroke="black" />
</g>
</svg>
問題 3.3(47 ページ) シェパードの錯視
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>シェパードの錯視</title>
. 第3章
<defs>
<polygon id="pararell" points="0,0 -60,0 90,-200 150,-200"
fill="none" stroke-width="3" stroke="black"/>
</defs>
<g transform="translate(100,250)"><use xlink:href="#pararell"/></g>
<g transform="translate(250,250)">
<g transform="rotate(53.2)">
<use xlink:href="#pararell"/>
</g>
</g>
</svg>
問題 3.4(47 ページ) ブルドンの錯視
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>ブルドンの錯視</title>
<g transform="translate(130,110)">
<g transform="rotate(60)">
<polygon points="0,0 100,0 100,-20 0,0 -100,0 -100,-20" fill="black" />
</g>
</g>
</svg>
問題 3.7(54 ページ) 主観的輪郭のネオン輝度現象
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>主観的輪郭のネオン輝度現象</title>
<defs>
<g id="Base">
<path d="M30,0 A30,30 0 0 0 0,-30"
stroke-width="4" stroke="red" fill="none"/>
<path d="M30,0 A30,30 0 1 1 0,-30"
stroke-width="4" stroke="black" fill="none"/>
<path d="M50,0 A50,50 0 0 0 0,-50"
stroke-width="4" stroke="red" fill="none"/>
<path d="M50,0 A50,50 0 1 1 0,-50"
stroke-width="4" stroke="black" fill="none"/>
<path d="M70,0 A70,70 0 0 0 0,-70"
stroke-width="4" stroke="red" fill="none"/>
<path d="M70,0 A70,70 0 1 1 0,-70"
stroke-width="4" stroke="black" fill="none"/>
<path d="M90,0 A90,90 0 0 0 0,-90"
stroke-width="4" stroke="red" fill="none"/>
<path d="M90,0 A90,90 0 1 1 0,-90"
stroke-width="4" stroke="black" fill="none"/>
</g>
</defs>
<g transform="translate(110,110),rotate(90)">
<use xlink:href="#Base"/>
</g>
7
8
<g transform="translate(310,110),rotate(180)">
<use xlink:href="#Base"/>
</g>
<g transform="translate(110,310)">
<use xlink:href="#Base"/>
</g>
<g transform="translate(310,310),rotate(270)">
<use xlink:href="#Base"/>
</g>
</svg>
問題 3.8(58 ページ) スーツマークを描く
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>スーツマークを描く</title>
<g transform="translate(150,300)">
<path d="M0,0 C220,-150 100,-320 0,-240 C-100,-320 -220,-150 0,0z"
fill="pink" stroke-width="4" stroke="red" />
</g>
<g transform="translate(420,200)">
<path
d="M20,50 C100,100 200,-20 0,-170 C-200,-20 -100,100 -20,50
L-30,100 30,100z"
fill="black" />
</g>
<g transform="translate(720,200)">
<path
d=" M30,30 C50,70 140,70 140,0 S 50,-70 30,-30
C70,-50 70,-140 0,-140 S-70,-50 -30,-30
C-50,-70 -140,-70 -140,0 S -50,70 -30,30
L-40,100 40,100 z"
fill="black" />
</g>
</svg>
問題 3.11(67 ページ) ザビニの錯視
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>ザビニの錯視</title>
<defs>
<pattern id="B" x="0" y="0" width="200" height="40"
patternUnits="userSpaceOnUse">
<path d="M0,0 l200,0 l-100,20z M0,40 l100,-20 l100,20z"
stroke="none" fill="black"/>
</pattern>
</defs>
<g transform="translate(10,10)">
<rect x="0" y="0" width="200" height="200"
stroke-width="1" stroke="black" fill="url(#B)"/>
. 第3章
</g>
<g transform="translate(440,10)">
<g transform="rotate(90)" >
<rect x="0" y="0" width="200" height="200"
stroke-width="1" stroke="black" fill="url(#B)"/>
</g>
</g>
</svg>
問題 3.12(70 ページ) 輝くヘルマン格子
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="330" width="330">
<title>輝くヘルマン格子</title>
<defs>
<pattern id="Hermann" width="50" height="50" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="50" height="50" fill="black"/>
<line x1="0" y1="25" x2="50" y2="25" stroke-width="6" stroke="lightgray"/>
<line x1="25" y1="0" x2="25" y2="50" stroke-width="6" stroke="lightgray"/>
<circle cx="25" cy="25" r="9" fill="white" stroke-width="3" stroke="black"/>
</pattern>
</defs>
<g transform="translate(20,20)">
<rect x="0" y="0" width="300" height="300" fill="url(#Hermann)" />
</g>
</svg>
問題 3.13(70 ページ) カフェウォール錯視–パターンで作成
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>カフェウォール錯視--パターンで作成</title>
<defs>
<rect id="Square" x="0" y="0" width="50" height="50" fill="black"/>
<rect id="L" x="0" y="0" width="100" height="2" fill="gray" />
<pattern id="unit" width="100" height="100" patternUnits="userSpaceOnUse">
<g transform="translate(0,0)">
<use xlink:href="#L"/>
<g transform="translate(20,2)">
<use xlink:href="#Square"/>
</g>
</g>
<g transform="translate(0,52)">
<g transform="translate(40,2)">
<use xlink:href="#Square"/>
</g>
<use xlink:href="#L"/>
</g>
</pattern>
</defs>
<g transform="translate(50,50)">
<rect x="0" y="0" width="500" height="300" fill="url(#unit)" />
9
10
</g>
</svg>
問題 3.14(70 ページ) モーガンのねじれひも
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>モーガンのねじれひも</title>
<defs>
<pattern id="twist" width="60" height="64"
patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="60" height="64" fill="lightgray"/>
<g transform="translate(0,-10)">
<g transform="translate(0,28)">
<rect x="0" y="0" width="60" height="4" fill="white"/>
<polygon points="0,0 30,0 30,2 15,2 15,4 0,4" fill="black"/>
<rect x="45" y="2" width="15" height="2" fill="black"/>
</g>
<g transform="translate(0,60)">
<rect x="0" y="0" width="60" height="4" fill="white"/>
<polygon points="0,0 15,0 15,2 30,2 30,4 0,4" fill="black"/>
<rect x="45" y="0" width="15" height="2" fill="black"/>
</g>
</g>
</pattern>
</defs>
<g transform="translate(20,20)">
<rect x="0" y="0" width="300" height="300"
fill="url(#twist)" />
</g>
</svg>
問題 3.17(74 ページ)
none, xMinYMin, xMidYMin, xMaxYMin, xMinYMid, xMidYMid, xMaxYMid, xMinYMax, xMidYMax, xMaxYMax の
10 種類
問題 3.19(77 ページ) グラデーションを使用した mask
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>グラデーションを使用した mask 要素</title>
<defs>
<radialGradient id="radGrad" gradiationUnit="objectBoundingBox"
cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop stop-color="white" offset="0%"/>
<stop stop-color="white" offset="60%"/>
<stop stop-color="black" offset="100%"/>
</radialGradient>
<mask id="mask1" maskUnits="userSpaceOnUse"
x="0" y="0" width="300" height="300">
<ellipse cx="150" cy="120" rx="130" ry="100" fill="url(#radGrad)"/>
</mask>
</defs>
. 第3章
<image x="0" y="0" xlink:href="cyclamen-2.JPG" width="300" height="300"
mask="url(#mask1)" ref2="image2E"/>
<ellipse cx="150" cy="120" rx="130" ry="100" fill="none" stroke-width="4"
opacity="0.2" stroke="red" />
</svg>
問題 3.20(77 ページ) グラデーションで図形を塗りつぶす
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<defs>
<linearGradient id="Grad" gradientUnits="objectBoundingBox">
<stop stop-color="red"
offset="0%"/>
<stop stop-color="yellow" offset="100%"/>
</linearGradient>
<polygon points="0,100 -58.8,-80.9 95.1,30.9 -95.1,30.9 58.8,-80.9"
id="star"/>
<g transform="translate(110,110)" id="fig" fill="none">
<g transform="scale(1,-1)">
<polygon
points="0,100 -95.1,30.9 -58.8,-80.9 58.8,-80.9 95.1,30.9"/>
<use x="210" y="0" xlink:href="#star"/>
<use x="420" y="0" xlink:href="#star" fill-rule="evenodd"/>
</g>
</g>
<mask id="mask" maskUnits="userSpaceOnUse"
x="10" y="0" width="620" height="200" fill="black">
<g transform="translate(110,110)">
<g transform="scale(1,-1)" fill="white">
<polygon points="0,100 -95.1,30.9 -58.8,-80.9 58.8,-80.9 95.1,30.9"/>
<g transform="translate(210,0)">
<polygon points="0,100 -58.8,-80.9 95.1,30.9 -95.1,30.9 58.8,-80.9"/>
</g>
<g transform="translate(420,0)">
<polygon points="0,100 -58.8,-80.9 95.1,30.9 -95.1,30.9 58.8,-80.9"
fill-rule="evenodd"/>
</g>
</g>
</g>
</mask>
</defs>
<rect x="10" y="0" width="620" height="200"
fill="url(#Grad)" mask="url(#mask)"/>
<use xlink:href="#fig" stroke="black" stroke-width="4" />
<rect x="10" y="200" width="620" height="50"
fill="url(#Grad)" stroke-width="4" stroke="black"/>
</svg>
問題 3.21(77 ページ) 二つの画像を細く分けて互い違いに並べて表示する
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
11
12
<title>二つの画像を細く分けて互い違いに並べて表示する</title>
<defs>
<rect id="Unit" x="0" y="0" width="20" height="300" fill="white"/>
<mask id="mask1" maskUnits="userSpaceOnUse"
x="0" y="0" width="300" height="300">
<rect x="0" y="0" width="20" height="300" fill="white"/>
<rect x="40" y="0" width="20" height="300" fill="white"/>
<rect x="80" y="0" width="20" height="300" fill="white"/>
<rect x="120" y="0" width="20" height="300" fill="white"/>
<rect x="160" y="0" width="20" height="300" fill="white"/>
<rect x="200" y="0" width="20" height="300" fill="white"/>
<rect x="240" y="0" width="20" height="300" fill="white"/>
<rect x="280" y="0" width="20" height="300" fill="white"/>
<rect x="320" y="0" width="20" height="300" fill="white"/>
<rect x="360" y="0" width="20" height="300" fill="white"/>
</mask>
</defs>
<g transform="translate(20,20)" opacity="1">
<image x="0" y="0" xlink:href="cyclamen-2.JPG"
width="400" height="400" mask="url(#mask1)" />
</g>
<g transform="translate(40,20)">
<image x="0" y="0" xlink:href="cherry.JPG"
width="400" height="400" mask="url(#mask1)" />
</g>
</svg>
第4章
問題 4.1(81 ページ) フィックの錯視 (アニメーション付き)
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<g transform="translate(50,150)">
<line x1="0" y1="0" x2="100" y2="0" stroke-width="10"
stroke="black" stroke-linecap="round"/>
<g>
<line x1="50" y1="0" x2="50" y2="-100" ref="line2-0"
stroke-width="10" stroke="black" stroke-linecap="round" />
<animateTransform attributeName="transform" attributeType="XML"
type="translate" from="-50,0" to="50,0" dur="10s" fill="freeze"/>
</g>
</g>
</svg>
問題 4.3(82 ページ) ジャッドの錯視
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>ジャッドの錯視</title>
. 第4章
13
<defs>
<g transform="rotate(45)" id="Line">
<line x1="0" y1="0" x2="30" line-cap="round"
stroke-width="10" stroke-linecap="round" stroke="black" />
<animateTransform attributeName="transform" type="rotate"
from="0" to="180" dur="20s" fill="remove" />
</g>
<g id="edge" >
<use xlink:href="#Line" />
<g transform="scale(1,-1)" ><use xlink:href="#Line" /></g>
</g>
</defs>
<g transform="translate(100,50)" >
<line x1="0" y1="0" x2="200" y2="0" stroke-width="10"
stroke-linecap="round" stroke="black" />
<circle cx="100" cy="0" r="10" fill="black"/>
<use xlink:href="#edge"/>
<g transform="translate(200,0)" > <use xlink:href="#edge"/></g>
</g>
</svg>
問題 4.4(84 ページ) 長方形が横に伸びる
何も属性がない g は scale のアニメーションを付けるのに必要です。
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%" >
<g transform="translate(50,50)" >
<g>
<rect x="0" y="0" width="100" height="50" stroke-width="5" stroke="black" fill="lime"/>
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1,1" to="2,1" dur="10s" fill="freeze" />
</g>
</g>
</svg>
問題 4.9(90 ページ) stop にアニメーションを付ける
前のものと二つ並べて同じ動きになることを確認できるようにしています。
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<defs>
<linearGradient id="Gradiation1" gradientUnits="userSpaceOnUse"
x1="0" y1="0" x2="800" y2="0">
<stop stop-color="yellow" offset="0%" ref="stop1"/>
<stop stop-color="red"
offset="25%" ref="stop2"/>
<stop stop-color="yellow" offset="50%" ref="stop3"/>
<stop stop-color="red"
offset="75%" ref="stop3"/>
<stop stop-color="yellow" offset="100%" ref="stop5"/>
<animate attributeName="x1" attributeType="XML"
from="0" to="-400" dur="5s" repeatCount="indefinite"/>
<animate attributeName="x2" attributeType="XML"
from="800" to="400" dur="5s" repeatCount="indefinite"/>
14
</linearGradient>
<linearGradient id="Gradiation2" gradientUnits="userSpaceOnUse"
x1="0" y1="0" x2="400" y2="0" >
<stop stop-color="yellow" offset="0%" >
<animate attributeName="stop-color" attributeType="CSS" dur="5s"
values="yellow;red;yellow" keyTimes="0;0.5;1"
repeatCount="indefinite" />
</stop>
<stop stop-color="red"
offset="50%" ref="stop2">
<animate attributeName="offset" attributeType="XML" dur="2.5s"
from="50%" to="0%" begin="0s;anim2col.end" id="anim2offset"
fill="freeze"/>
<animate attributeName="stop-color" attributeType="CSS" dur="2.5s"
from="red" to="yellow" begin="anim2offset.end" id="anim2col"/>
</stop>
<stop stop-color="yellow"
offset="100%" ref="stop2">
<animate attributeName="offset" attributeType="XML" dur="5s"
from="100%" to="0%" repeatCount="indefinite" />
</stop>
<stop stop-color="yellow"
offset="100%" ref="stop2">
<animate attributeName="stop-color" attributeType="CSS" dur="2.5s"
from="yellow" to="red" fill="freeze" begin="0s;anim4offset.end"
id="anim4col"/>
<animate attributeName="offset" attributeType="XML" dur="2.5s"
from="100%" to="50%" begin="anim4col.end" id="anim4offset"/>
</stop>
<stop stop-color="yellow"
offset="100%" ref="stop2">
<animate attributeName="stop-color" attributeType="CSS" dur="5s"
values="yellow;red;yellow" keyTimes="0;0.5;1"
repeatCount="indefinite" />
</stop>
</linearGradient>
</defs>
<g transform="translate(20,20)">
<rect x="0" y="0" width="400" height="50"
stroke="black" stroke-width="4" fill="url(#Gradiation1)"/>
<rect x="0" y="60" width="400" height="50" ref="rectS"
stroke="black" stroke-width="4" fill="url(#Gradiation2)"/>
</g>
</svg>
問題 4.10(90 ページ) ザバーニョの錯視 (アニメーション付き)
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>ザバーニョの錯視 (アニメーション付き)</title>
<defs>
<linearGradient id="Gradient1"
gradientUnits="objectBoundingBox">
<stop stop-color="black" offset="0%"/>
<stop stop-color="white" offset="100%">
<animate attributeName="stop-color" attributeType="XML"
from="black" to="white" dur="10s" fill="freeze"/>
. 第4章
15
</stop>
</linearGradient>
<rect id="R" x="-175" y="-25" width="150" height="50"
stroke-width="4" stroke="none" fill="url(#Gradient1)" />
<g id="Unit">
<use xlink:href="#R"/>
<g transform="rotate(90)"><use xlink:href="#R"/></g>
<g transform="rotate(180)"><use xlink:href="#R"/></g>
<g transform="rotate(270)"><use xlink:href="#R"/></g>
</g>
</defs>
<g transform="translate(250,200)"><use xlink:href="#Unit"/></g>
<g transform="translate(650,200)">
<rect x="-175" y="-175" width="350" height="350" fill="lightgray" stroke="none"/>
<use xlink:href="#Unit"/>
</g>
</svg>
問題 4.11(91 ページ) 正方形の移動
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%" >
<g>
<rect x="0" y="0" width="100" height="100" stroke-width="5" stroke="black" fill="red"/>
<animateTransform attributeName="transform" attributeType="XML"
type="translate" values="100,100; 200,100; 200,200; 100,200; 100,100"
keytimes="0; 0.25; 0.5; 0.75; 1" dur="20s" fill="freeze"/>
</g>
</svg>
問題 4.12(91 ページ) 問題??の画像を片方づつ表示する
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<defs>
<rect id="Unit" x="0" y="0" width="20" height="300" fill="white"/>
<mask id="mask1" maskUnits="userSpaceOnUse"
x="0" y="0" width="300" height="300">
<rect x="0" y="0" width="20" height="300" fill="white"/>
<rect x="40" y="0" width="20" height="300" fill="white"/>
<rect x="80" y="0" width="20" height="300" fill="white"/>
<rect x="120" y="0" width="20" height="300" fill="white"/>
<rect x="160" y="0" width="20" height="300" fill="white"/>
<rect x="200" y="0" width="20" height="300" fill="white"/>
<rect x="240" y="0" width="20" height="300" fill="white"/>
<rect x="280" y="0" width="20" height="300" fill="white"/>
<rect x="320" y="0" width="20" height="300" fill="white"/>
<rect x="360" y="0" width="20" height="300" fill="white"/>
</mask>
</defs>
<g transform="translate(20,20)">
<image x="0" y="0" xlink:href="../CH3/cyclamen-2.JPG"
16
width="400" height="400" mask="url(#mask1)" />
<animate attributeName="visibility" attributeType="CSS" dur="30s"
values="visible;hidden" calcMode="discrete"
keyTimes="0;0.66" fill="remove"/>
</g>
<g transform="translate(40,20)">
<image x="0" y="0" xlink:href="../CH3/cherry.JPG"
width="400" height="400" mask="url(#mask1)" />
<animate attributeName="visibility" attributeType="CSS" dur="30s"
values="visible;hidden;visible" calcMode="discrete"
keyTimes="0;0.33;0.66" fill="remove"/>
</g>
</svg>
問題 4.13(94 ページ) 二つのボタンを持つストップウォッチ
「Start」を押すとはじめから動き出すのが欠点です。
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="400" width="400">
<defs>
<line id="TickL" x1="120" y1="0" x2="150" y2="0" stroke-width="3" stroke="black"/>
<line id="TickS" x1="135" y1="0" x2="150" y2="0" stroke-width="3" stroke="black"/>
<g id="Ticks4">
<g transform="rotate(0)"><use xlink:href="#TickL"/></g>
<g transform="rotate(30)"><use xlink:href="#TickS"/></g>
<g transform="rotate(60)"><use xlink:href="#TickS"/></g>
</g>
</defs>
<g transform="translate(200,200) rotate(-90)">
<circle cx="0" cy="0" r="150" stroke="black" stroke-width="4" fill="none"/>
<g transform="rotate(0)"><use xlink:href="#Ticks4"/></g>
<g transform="rotate(90)"><use xlink:href="#Ticks4"/></g>
<g transform="rotate(180)"><use xlink:href="#Ticks4"/></g>
<g transform="rotate(270)"><use xlink:href="#Ticks4"/></g>
<path d="M0,-3 135,-3 135,-8 150,0 135,8 135,3 0,3z" fill="red">
<animateTransform attributeName="transform" attributeType="XML" type="rotate"
from="0" to="360" dur="60s" repeatCount="indefinite"
begin="Face1.click" end="Face2.click" fill="freeze"/>
</path>
</g>
<text x="145" y="375" text-anchor="middle" font-size="12" fill="black">start</text>
<rect x="120" y="360" width="50" height="20"
stroke-width="2" stroke="black" fill="white" fill-opacity="0" id="Face1"/>
<text x="255" y="375" text-anchor="middle" font-size="12" fill="black">stop</text>
<rect x="230" y="360" width="50" height="20"
stroke-width="2" stroke="black" fill="white" fill-opacity="0" id="Face2"/>
</svg>
問題 4.14(94 ページ) ポッケンドルフの錯視 (アニメーション付き)
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
. 第4章
17
<g transform="translate(110,140)">
<line x1="100" y1="-100" x2="-100" y2="100" stroke-width="3" stroke="black"/>
<line x1="0" y1="-20" x2="-100" y2="80" stroke-width="3" stroke="black"/>
<line x1="0" y1="-40" x2="-100" y2="60" stroke-width="3" stroke="black" />
<rect x="-30" y="-120" width="60" height="220" stroke-width="3" stroke="black" fill="white" >
<animate attributeName="fill-opacity" attributeType="XML"
from="1" to="0" begin="mouseover" end="mouseout" dur="10s" fill="remove"/>
</rect>
</g>
</svg>
図 2.14(24 ページ) カフェウォール錯視にアニメーションをつける
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<title>カフェウォール錯視にアニメーションをつける</title>
<defs>
<rect id="LineH" x="0" y="0" width="510" height="2" fill="black">
<animateColor attributeName="fill" attributeType="CSS"
from="black" to="lightgray" dur="10s" fill="freeze"/>
</rect>
<rect id="Square" x="0" y="0" width="50" height="50" fill="black"/>
<g id="unit">
<g transform="translate(0,0)"> <use xlink:href="#Square"/></g>
<g transform="translate(100,0)"><use xlink:href="#Square"/></g>
<g transform="translate(200,0)"><use xlink:href="#Square"/></g>
<g transform="translate(300,0)"><use xlink:href="#Square"/></g>
<g transform="translate(400,0)"><use xlink:href="#Square"/></g>
</g>
<g id="unitA">
<use x="0" y="2" xlink:href="#unit"/>
<use xlink:href="#LineH"/>
</g>
<g id="unitB">
<use x="20" y="2" xlink:href="#unit"/>
<use xlink:href="#LineH"/>
</g>
</defs>
<g transform="translate(50,52)"> <use xlink:href="#unit"/></g>
<g transform="translate(50,102)"><use xlink:href="#unitB"/></g>
<g transform="translate(50,154)"><use xlink:href="#unitA"/></g>
<g transform="translate(50,206)"><use xlink:href="#unitB"/></g>
<g transform="translate(50,258)"><use xlink:href="#unitA"/></g>
</svg>
問題 4.16(96 ページ) ゆがんだ正方形
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%" >
<title>ゆがんだ正方形</title>
<g transform="translate(20,160)" >
<path d="M200,-140 0,0 200,140
18
M200,-120 0,0 200,120 M200,-100 0,0 200,100
M200,-80 0,0 200,80 M200,-60 0,0 200,60
M200,-40 0,0 200,40 M200,-20 0,0 200,20
M0,0 200,0"
stroke-width="1" stroke="black" fill="none"/>
<rect x="80" width="80" height="80"
fill="none" stroke-width="2" stroke="black">
<animate attributeName="y" attributeType="XML"
values="-160;80;-160" dur="20s" repeatCount="indefinite"/>
</rect>
</g>
</svg>
第5章
問題 5.2(106 ページ) 文字列をグラデーションで塗る (アニメーション付き)
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%">
<style type="text/css">
.textStyle {font-size:80px; text-anchor:start;
font-family:Impact;stroke:black; stroke-width:3; fill:red;}
</style>
<defs>
<linearGradient id="Gradiation1" gradientUnits="userSpaceOnUse"
x1="0" y1="0" x2="1600" y2="0">
<stop stop-color="yellow" offset="0%"/>
<stop stop-color="red" offset="30%"/>
<stop stop-color="yellow" offset="50%"/>
<stop stop-color="red" offset="80%"/>
<stop stop-color="yellow" offset="100%"/>
<animate attributeName="x1" attributeType="XML"
from="0" to="-800" dur="10s" repeatCount="indefinite"/>
<animate attributeName="x2" attributeType="XML"
from="1600" to="800" dur="10s" repeatCount="indefinite"/>
</linearGradient>
<mask id="text" naskUnits="userSpaceOnUse"
x="0" y="0" width="600" height="200" fill="black">
<text x="400" y="100" font-size="100" text-anchor="middle"
fill="white" font-family="Impact">This is an Example.</text>
</mask>
</defs>
<g transform="translate(50,0)">
<rect x="0" y="0" width="800" height="200" fill="url(#Gradiation1)"
mask="url(#text)" />
<text x="400" y="100" font-size="100" text-anchor="middle"
fill="none" stroke-width="4" stroke="black"
font-family="Impact">This is an Example.</text>
<line x1="0" y1="0" x2="0" y2="200" stroke-width="1" stroke="black"/>
<line x1="800" y1="0" x2="800" y2="200" stroke-width="1" stroke="black"/>
</g>
. 第7章
19
</svg>
第7章
問題 7.9(166 ページ) feTurbulance に numOctaves の操作するボタンを追加する
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%" onload="init()" >
<title>numOctaves の操作するボタンを追加する</title>
<script type="text/ecmascript">
//
<![CDATA[
var DragObj1, DragObj2, OffsetX, FilterObj, BFVal, BF, NumOVal=1, NumO, Base;
function init(event) {//// ref="initS"
Base= document.getElementById("base");
Base.addEventListener("mouseup",endDrag,true);
BFVal = document.getElementById("BFValue");
FilterObj = document.getElementById("FilterfeTurbulence");
DragObj1 = document.getElementById("Fbar");
DragObj1.addEventListener("mousedown",beginDrag,false);
NumO = document.getElementById("numOct");
DragObj2 = document.getElementById("Nbar");
DragObj2.addEventListener("mousedown",beginDrag,false);
setBF(150);
FilterObj.setAttribute("baseFrequency", BF);
}//// ref="initE"
function beginDrag(event) {//// ref="dragBeginS"
Base.addEventListener("mousemove",Dragging,true);
OffsetX = event.target.getAttribute("x")-event.clientX;
}
function Dragging(event) {
var PS = event.clientX+OffsetX;
if(PS<=0) PS =0;
if(PS >300) PS = 299;
if(event.target.getAttribute("id") == "Fbar"){
setBF(PS);
} else {
NumOVal = 1+PS/20;
DragObj2.setAttribute("x", PS);
NumO.firstChild.nodeValue=NumOVal.toFixed(4);
}
}
function setBF(x) {
BF = Math.exp((-3+x/150.)*Math.LN10);
DragObj1.setAttribute("x", x);
BFVal.firstChild.nodeValue=BF.toFixed(4);
}
function endDrag(event) {
FilterObj.setAttribute("baseFrequency", BF);
FilterObj.setAttribute("numOctaves", NumOVal);
Base.removeEventListener("mousemove",Dragging,true);
}
20
// ]]></script>
<title> Scroll Bar </title>
<defs>
<filter id="Filter" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feTurbulence type="turbulence" id="FilterfeTurbulence"
baseFrequency="0.005" numOctaves="1"/>
</filter>
<style type="text/css">
text { font-size:20px;}
</style>
</defs>
<g id="base"><!-- ref="figS" -->
<rect width="100%" height="100%" fill="white"/>
<rect x="30" y="30" width="800" height="400" filter="url(#Filter)"/>
<g transform="translate(281,450)">
<rect x="0" y="0" width="325" height="20" fill="blue"/>
<rect id="Fbar" x="21" y="0" width="25" height="20" fill="red"/>
<text y="40" >baseFrequency: </text>
<text id="BFValue" x="300" y="40" text-anchor="end"> </text>
<rect x="0" y="60" width="325" height="20" fill="blue"/>
<rect id="Nbar" x="21" y="60" width="25" height="20" fill="red"/>
<text y="100" >numOctave: </text>
<text id="numOct" x="300" y="100" text-anchor="end"> </text>
</g>
</g>
</svg>
問題 7.10(169 ページ) 直線の色を変える
ここでは色が二つ選べるようにしています。
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
height="100%" width="100%" onload="init()">
<title>ドラッグして描く直線の色を変える</title>
<script type="text/ecmascript">
//<![CDATA[
var svgNS ="http://www.w3.org/2000/svg";
var StrokeColor ="black"
var NewLine = null, R;
function init() {
document.getElementsByTagName("g").item(0).addEventListener("click",click, false);
R = document.getElementById("Rect");
R.addEventListener("mousedown",mdown, false);
R.addEventListener("mouseup",mup, false);
}
function mdown(E) {
NewLine = document.createElementNS(svgNS, "line");
NewLine.setAttribute("x1",E.clientX);
NewLine.setAttribute("y1",E.clientY);
NewLine.setAttribute("x2",E.clientX);
NewLine.setAttribute("y2",E.clientY);
NewLine.setAttribute("stroke",StrokeColor);
NewLine.setAttribute("stroke-width","4");
R.parentNode.insertBefore(NewLine,R);
. 第7章
R.addEventListener("mousemove",mmove, false);
}
function click(E) {
StrokeColor = E.target.getAttribute("fill");
}
function mmove(E) {
NewLine.setAttribute("x2",E.clientX);
NewLine.setAttribute("y2",E.clientY);
}
function mup(E) {
R.removeEventListener("mousemove",mmove, false);
}
//]]></script>
<rect x="0" y="0" width="100%" height="100%" id="Rect" opacity="0" ref="rect" />
<g transform="translate(10,10)">
<rect x="0" y="0" width="20" height="20" fill="black" />
<rect x="0" y="30" width="20" height="20" fill="red" />
</g>
</svg>
問題 7.11(169 ページ) フィックの錯視図形をインターラクティブに操作する
終了時に長さがどれ位になったかを表示するようにしています。
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
height="100%" width="100%" onload="init()">
<script type="text/ecmascript">
//<![CDATA[
var Vertical, Base, OrgPos, L, Text;
function init() {//// ref="init"
Base = document.getElementById("Base");
Text = document.getElementById("text");
Vertical = document.getElementById("vertical");
Base.addEventListener("mousedown",mdown,false);
Base.addEventListener("mouseup",mup,false);
}
function mdown(E) {
Base.addEventListener("mousemove",mmove,false);
OrgPos = E.clientY;
L = Vertical.getAttribute("y2");
}
function mmove(E) {
Vertical.setAttribute("y2",L-(OrgPos-E.clientY));
}
function mup(E) {
var T = document.createTextNode("Length:"+Vertical.getAttribute("y2"));
Text.replaceChild(T, Text.firstChild);
Base.removeEventListener("mousemove",mmove,false);
}
//]]>
</script>
<style type="text/css">
line {stroke-width:8; stroke-linecap:round; stroke:black;}
</style>
<g id="Base">
21
22
<rect x="0" y="0" width="100%" height="100%" fill="white"/>
<text id="text" x="20" y="20" font-size="20px" fill="black">Length</text>
<g transform="translate(200,300)">
<path d="M-100,-50 100,-50 M-100,-100 100,-100 M-100,-150 100,-150"
stroke-width="1" stroke="black" opacity="0" />
<line x1="-100" y1="0" x2="100" y2="0" />
<line id="vertical" x1="0" y1="0" x2="0" y2="-200" />
</g>
</g>
</svg>
問題 7.14(178 ページ) ツェルナーの錯視 (アニメーション付き)
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%" onload="init()">
<script type="text/ecmascript" xlink:href="./make-svg-elm.js" />
<script type="text/ecmascript">
//
<![CDATA[
var Canvas;
var W = 1, WCol = "black";
var sW = 1, sWCol = "black", sL = 50/2, Ang=30, Step = 20;
var X1 = 50, Y1=50, X2 = 300, Y2 = 100;
function init() {
var G1, G2, Tmp, i;
Canvas = document.getElementById("canvas");
MKSVGElm(Canvas, "line",
["x1", X1, "y1", Y1, "x2", X2, "y2", Y1,
"stroke-width", W, "stroke", WCol], []);
MKSVGElm(Canvas, "line",
["x1", X1, "y1", Y2, "x2", X2, "y2", Y2,
"stroke-width", W, "stroke", WCol], []);
G1 = MKSVGElm(null, "g",[], []);
G2 = MKSVGElm(G1, "g",[], []);
MKSVGElm(G2, "line",
["x1", -sL, "y1", 0, "x2", sL, "y2", 0,
"stroke-width", sW, "stroke", sWCol],[]);
SetAttributes(G2,["transform","rotate("+Ang+")"]);
MKSVGElm(G2, "animateTransform",["attributeName","transform",
"attributeType", "XML",
"type", "rotate", "from", "0", "to", "180", "dur", "10s"],[]);
for(i=X1+10; i<X2-10; i+= Step) {
Tmp = G1.cloneNode(true);
SetAttributes(Tmp,["transform","translate("+i+"," + Y1 +")"]);
Canvas.appendChild(Tmp);
}
SetAttributes(G2,["transform","rotate("+(-Ang)+")"]);
SetAttributes(G2.lastChild,["to","-180"]);
for(i=X1+10; i<X2-10; i+= Step) {
Tmp = G1.cloneNode(true);
SetAttributes(Tmp,["transform","translate("+i+"," + Y2 +")"]);
Canvas.appendChild(Tmp);
}
}
. 第7章
//
]]></script>
<g id="canvas"/>
</svg>
問題 7.15(178 ページ) 画面に直線を追加する (関数群で書き直す)
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%" onload="init()">
<script type="text/ecmascript" xlink:href="./make-svg-elm.js"></script>
<script type="text/ecmascript">
//<![CDATA[
var NewLine = null, R;
function init() {
R = document.getElementById("Rect");
R.addEventListener("mousedown",mdown, false);
R.addEventListener("mouseup",mup, false);
}
function mdown(E) {
NewLine = MKSVGElm(null,"line",
["x1",E.clientX,"y1",E.clientY,"x2",E.clientX,"y2",E.clientY,
"stroke","red","stroke-width","4"],[]);"mousemove",mmove
R.addEventListener("mousemove",mmove, false);
R.parentNode.insertBefore(NewLine,R);
}
function mmove(E) {
SetAttributes(NewLine,["x2",E.clientX,"y2",E.clientY]);
}
function mup(E) {
R.removeEventListener("mousemove",mmove, false);
}
//]]></script>
<rect x="0" y="0" width="100%" height="100%" id="Rect" opacity="0" ref="rect" />
</svg>
問題 7.16(178 ページ) ネックレスの糸
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%" onload="init()">
<title>ネックレスの糸</title>
<script type="text/ecmascript" xlink:href="./make-svg-elm.js"></script>
<script type="text/ecmascript">
<![CDATA[
var Canvas;
function init(){
DrawFigs("black", 100, 20, 10, 4, "Canvas1");
DrawFigs("blue", 150, 25, 8, 3.5, "Canvas1");
}
function DrawFigs(Color1, R, L, W, WW, Place) {
var i;
Canvas = document.getElementById(Place);
for(i=0;i<360; i+=W) {
DrawFigure(R, R+L, R-L, i, WW, Color1);
23
24
}
}
function DrawFigure(R, mR, sR, MidAng, WAng, Color) {
var d, i, Ang, R0, Ang0, MCos, MSin;
d ="M";
Ang= Math.PI*(MidAng-WAng)/180;
d += R*Math.cos(Ang) + ","+R*Math.sin(Ang)+" ";
Ang0= Math.PI*(MidAng)/180;
MCos = Math.cos(Ang0);
MSin = Math.sin(Ang0);
d += mR*MCos + ","+mR*MSin+" ";
Ang= Math.PI*(MidAng+WAng)/180;
d += R*Math.cos(Ang) + ","+R*Math.sin(Ang)+" ";
d += sR*MCos + ","+sR*MSin+"z";
return MKSVGElm(Canvas, "path",
["d", d, "stroke", "none", "fill", Color],[]);
}
]]></script>
<g id="Canvas1" transform="translate(250,250)"/>
<g id="Canvas2" transform="translate(750,250)"/>
</svg>
問題 7.18(184 ページ) サイクロイドを描く — クリックでアニメーションを開始
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
height="100%" width="100%" onload="init()">
<script type="text/ecmascript">
//<![CDATA[
var R = 50, Current = 1, Step=2, d ="M0,0 ";
var T, Rot, C, Canvas;
function init() {
Canvas = document.getElementsByTagName("svg").item(0);
C =document.getElementById("cycliod");
T =document.getElementById("translate");
Rot =document.getElementById("rotate");
Canvas.addEventListener("click", drawCurve, true);
}
function drawCurve(e){
var Next = Current + Step, rad;
Canvas.removeEventListener("click", drawCurve, true);
if(Current<=360) {
for( ; Current< Next; Current++) {
rad = Current/180*Math.PI;
pX = R*(rad-Math.sin(rad));
pY = R*(-1+Math.cos(rad));
d += pX+","+pY+" ";
}
C.setAttribute("d",d);
T.setAttribute("transform","translate(" + (R*rad) + ",-50)");
Rot.setAttribute("transform", "rotate("+Next+")");
setTimeout("drawCurve()",100);
}
}
//]]>
. 第7章
</script>
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<g transform="translate(100,200)">
<line x1="-50" y1="0" x2="400" y2="0" stroke-width="2" stroke="black"/>
<path id="cycliod" fill="none" stroke="black" stroke-width="3"/>
<g id="translate" transform="translate(0,-50)">
<g id="rotate">
<circle cx="0" cy="0" r="50" stroke-width="3" stroke="black" fill="none"/>
<line x1="0" y1="0" x2="0" y2="50" stroke-width="2" stroke="black" />
<circle cx="0" cy="50" r="5" fill="black"/>
</g>
</g>
</g>
</svg>
25

WCS 2.0 MetOcean Profile