星座のプログラムを作り変えました。今回は10月の星座ということで、てんびん座です。 今回も Snap.svg を使いました。
Snap.svg ライブラリと JavaScript のソースファイルを指定します。
<script src="js/snap.svg-min.js"></script> <script src="js/zodiac06.js"></script>
実行結果のところには "Zodiac" という id の svg 要素と "code" という id の pre 要素を用意しました。 中身は zodiac06.js の中で更新、追加しています。
今回の svg 要素でも Adobe Illustrator で作成した天秤の絵をそのまま貼り付けています。 Illustrator のレイヤーが g 要素として出力され、元の絵は左上に位置していて、まだ、 transform 属性が指定されていません。
<h2>実行結果</h2>
<svg id="Zodiac" xmlns="http://www.w3.org/2000/svg" width="640" height="400">
<rect x="0" y="0" width="640" height="400" style="fill:#111"/>
<g id="Libra">
<ellipse cx="70" cy="117" rx="70" ry="35" transform="rotate(342 70 117)"
style="fill:#919191;stroke-width:0"/>
<ellipse cx="76" cy="133" rx="63" ry="36" transform="rotate(342 76 133)"
style="fill:#737373;stroke-width:0"/>
<ellipse cx="73" cy="126" rx="66" ry="35" transform="rotate(342 73 126)"
style="fill:#b8b8b8;stroke-width:0"/>
<ellipse cx="71" cy="121" rx="68" ry="40" transform="rotate(342 71 121)"
style="fill:transparent;stroke:#b8b8b8;stroke-width:4"/>
<ellipse cx="110" cy="221" rx="63" ry="36" transform="rotate(342 110 221)"
style="fill:#737373;stroke-width:0"/>
<ellipse cx="104" cy="207" rx="70" ry="35" transform="rotate(342 104 207)"
style="fill:#919191;stroke-width:0"/>
<ellipse cx="106" cy="214" rx="66" ry="35" transform="rotate(342 106 214)"
style="fill:#b8b8b8;stroke-width:0"/>
<ellipse cx="104" cy="210" rx="68" ry="40" transform="rotate(342 104 210)"
style="fill:transparent;stroke:#b8b8b8;stroke-width:4"/>
<rect x="74" y="52" width="190" height="12" transform="rotate(34 169 58)"
style="fill:#62300f;stroke-width:0"/>
<rect x="154" y="31" width="15" height="61" transform="rotate(34 161 61)"
style="fill:#8a8a8a;stroke-width:0"/>
<ellipse cx="185" cy="25" rx="11" ry="11" transform="rotate(359 185 25)"
style="fill:transparent;stroke:#8a8a8a;stroke-width:4"/>
<ellipse cx="139" cy="94" rx="8" ry="8" transform="rotate(359 139 94)"
style="fill:transparent;stroke:#8a8a8a;stroke-width:4"/>
<rect x="118" y="100" width="32" height="10" transform="rotate(34 134 105)"
style="fill:#8a8a8a;stroke-width:0"/>
<polygon points="129,108 113,120 145,120" transform="rotate(214 129 114)"
style="fill:#8a8a8a;stroke-width:0"/>
<line x1="99" y1="0" x2="81" y2="26" style="stroke:#735412;stroke-width:4"/>
<line x1="244" y1="99" x2="233" y2="120" style="stroke:#735412;stroke-width:4"/>
<line x1="233" y1="119" x2="205" y2="155" style="stroke:#735412;stroke-width:4"/>
<line x1="234" y1="116" x2="179" y2="142" style="stroke:#735412;stroke-width:4"/>
<line x1="228" y1="120" x2="175" y2="164" style="stroke:#735412;stroke-width:4"/>
<line x1="81" y1="24" x2="48" y2="51" style="stroke:#735412;stroke-width:4"/>
<line x1="83" y1="25" x2="58" y2="59" style="stroke:#735412;stroke-width:4"/>
<line x1="80" y1="25" x2="79" y2="54" style="stroke:#735412;stroke-width:4"/>
<line x1="60" y1="57" x2="58" y2="90" style="stroke:#735412;stroke-width:4"/>
<line x1="58" y1="88" x2="65" y2="116" style="stroke:#735412;stroke-width:4"/>
<line x1="65" y1="114" x2="62" y2="131" style="stroke:#735412;stroke-width:4"/>
<line x1="62" y1="131" x2="49" y2="140" style="stroke:#735412;stroke-width:4"/>
<line x1="51" y1="139" x2="29" y2="147" style="stroke:#735412;stroke-width:4"/>
<line x1="30" y1="147" x2="20" y2="156" style="stroke:#735412;stroke-width:4"/>
<line x1="174" y1="175" x2="206" y2="156" style="stroke:#735412;stroke-width:4"/>
<line x1="176" y1="173" x2="130" y2="192" style="stroke:#735412;stroke-width:4"/>
<line x1="130" y1="192" x2="113" y2="209" style="stroke:#735412;stroke-width:4"/>
<line x1="115" y1="220" x2="113" y2="209" style="stroke:#735412;stroke-width:4"/>
<line x1="115" y1="219" x2="134" y2="226" style="stroke:#735412;stroke-width:4"/>
<line x1="132" y1="225" x2="163" y2="220" style="stroke:#735412;stroke-width:4"/>
<line x1="79" y1="52" x2="80" y2="81" style="stroke:#735412;stroke-width:4"/>
<line x1="80" y1="81" x2="76" y2="110" style="stroke:#735412;stroke-width:4"/>
<line x1="76" y1="111" x2="71" y2="132" style="stroke:#735412;stroke-width:4"/>
<line x1="72" y1="129" x2="64" y2="144" style="stroke:#735412;stroke-width:4"/>
<line x1="64" y1="144" x2="66" y2="149" style="stroke:#735412;stroke-width:4"/>
<line x1="66" y1="149" x2="78" y2="152" style="stroke:#735412;stroke-width:4"/>
<line x1="78" y1="152" x2="97" y2="148" style="stroke:#735412;stroke-width:4"/>
<line x1="96" y1="148" x2="106" y2="148" style="stroke:#735412;stroke-width:4"/>
<line x1="48" y1="51" x2="34" y2="74" style="stroke:#735412;stroke-width:4"/>
<line x1="34" y1="74" x2="30" y2="100" style="stroke:#735412;stroke-width:4"/>
<line x1="37" y1="116" x2="29" y2="101" style="stroke:#735412;stroke-width:4"/>
<line x1="37" y1="116" x2="52" y2="120" style="stroke:#735412;stroke-width:4"/>
<line x1="82" y1="112" x2="51" y2="120" style="stroke:#735412;stroke-width:4"/>
<line x1="82" y1="112" x2="84" y2="94" style="stroke:#735412;stroke-width:4"/>
<line x1="84" y1="94" x2="69" y2="79" style="stroke:#735412;stroke-width:4"/>
<line x1="176" y1="163" x2="140" y2="174" style="stroke:#735412;stroke-width:4"/>
<line x1="140" y1="174" x2="107" y2="197" style="stroke:#735412;stroke-width:4"/>
<line x1="107" y1="197" x2="87" y2="221" style="stroke:#735412;stroke-width:4"/>
<line x1="87" y1="220" x2="83" y2="235" style="stroke:#735412;stroke-width:4"/>
<line x1="83" y1="235" x2="75" y2="247" style="stroke:#735412;stroke-width:4"/>
<line x1="75" y1="247" x2="59" y2="251" style="stroke:#735412;stroke-width:4"/>
<line x1="179" y1="140" x2="139" y2="162" style="stroke:#735412;stroke-width:4"/>
<line x1="139" y1="162" x2="114" y2="182" style="stroke:#735412;stroke-width:4"/>
<line x1="114" y1="183" x2="103" y2="212" style="stroke:#735412;stroke-width:4"/>
<line x1="102" y1="211" x2="91" y2="219" style="stroke:#735412;stroke-width:4"/>
<line x1="80" y1="221" x2="90" y2="220" style="stroke:#735412;stroke-width:4"/>
<line x1="81" y1="219" x2="72" y2="203" style="stroke:#735412;stroke-width:4"/>
<line x1="72" y1="203" x2="78" y2="190" style="stroke:#735412;stroke-width:4"/>
<line x1="77" y1="190" x2="96" y2="171" style="stroke:#735412;stroke-width:4"/>
</g>
</svg>
<h3>生成されたコード</h3>
<ul>
<li>3行目：transform 属性により下記の zodiac06.html のソース（天秤）から移動しています。</li>
<li>68行～：Snap.svg ライブラリで追加した星座の SVG です。</li>
</ul>
<pre id="code" class="brush: xml; class-name: 'code'; highlight: [3,68]">
</pre>
てんびん座の星座を表示するプログラムです。 元々 HTML に記載されていた天秤の絵を移動し、座標や星座を重ねています。
const width = 640;
const height = 400;
const delay = 3000; // [ms]
const blink = 300; // [ms]
let s; // for Snap
/* Initialize stars in Libra
* return star[] - array of stars
* index: Name
* RA (Right ascension), Dec (Declination), Mag (Apparent magnitude),
* FD (Flamsteed designation)
*/
let star = {};
star['β Lib'] = {ra: '15 17 00.47', dec: '-09 22 58.3', mag: 2.61, fd: 27};
star['α2 Lib'] = {ra: '14 50 52.78', dec: '-16 02 29.8', mag: 2.75, fd: 9};
star['σ Lib'] = {ra: '15 04 04.26', dec: '-25 16 54.7', mag: 3.25, fd: 20};
star['υ Lib'] = {ra: '15 37 01.46', dec: '-28 08 06.3', mag: 3.60, fd: 39};
star['τ Lib'] = {ra: '15 38 39.38', dec: '-29 46 39.7', mag: 3.66, fd: 40};
star['γ Lib'] = {ra: '15 35 31.54', dec: '-14 47 22.4', mag: 3.91, fd: 38};
star['θ Lib'] = {ra: '15 53 49.48', dec: '-16 43 46.6', mag: 4.13, fd: 46};
star['16 Lib'] = {ra: '14 57 11.06', dec: '-04 20 45.9', mag: 4.47, fd: 16};
star['ι1 Lib'] = {ra: '15 12 13.31', dec: '-19 47 29.9', mag: 4.54, fd: 24};
star['37 Lib'] = {ra: '15 34 10.52', dec: '-10 03 50.3', mag: 4.61, fd: 37};
star['κ Lib'] = {ra: '15 41 56.82', dec: '-19 40 42.9', mag: 4.75, fd: 43};
star['δ Lib'] = {ra: '15 00 58.39', dec: '-08 31 08.2', mag: 4.91, fd: 19};
star['ε Lib'] = {ra: '15 24 11.93', dec: '-10 19 18.8', mag: 4.92, fd: 31};
star['11 Lib'] = {ra: '14 51 01.02', dec: '-02 17 55.9', mag: 4.93, fd: 11};
star['48 Lib'] = {ra: '15 58 11.38', dec: '-14 16 45.5', mag: 4.95, fd: 48};
star['42 Lib'] = {ra: '15 40 16.91', dec: '-23 49 05.0', mag: 4.97, fd: 42};
star['λ Lib'] = {ra: '15 53 20.06', dec: '-20 10 01.2', mag: 5.03, fd: 45};
star['36 Lib'] = {ra: '15 34 37.31', dec: '-28 02 48.9', mag: 5.13, fd: 36};
star['α1 Lib'] = {ra: '14 50 41.26', dec: '-15 59 49.5', mag: 5.15, fd: 8};
star['HR 5780'] = {ra: '15 34 26.53', dec: '-09 11 00.1', mag: 5.16};
star['ν Lib'] = {ra: '15 06 37.62', dec: '-16 15 24.3', mag: 5.19, fd: 21};
star['12 Lib'] = {ra: '14 54 20.14', dec: '-24 38 31.7', mag: 5.27, fd: 12};
star['μ Lib'] = {ra: '14 49 19.09', dec: '-14 08 56.3', mag: 5.32, fd: 7};
star['HD 126218'] = {ra: '14 24 48.66', dec: '-24 48 22.6', mag: 5.34};
star['41 Lib'] = {ra: '15 38 54.51', dec: '-19 18 06.2', mag: 5.36, fd: 41};
star['η Lib'] = {ra: '15 44 04.42', dec: '-15 40 21.6', mag: 5.41, fd: 44};
star['49 Lib'] = {ra: '16 00 19.98', dec: '-16 31 56.6', mag: 5.47, fd: 49};
star['ξ2 Lib'] = {ra: '14 56 46.11', dec: '-11 24 35.0', mag: 5.48, fd: 15};
star['HD 138413'] = {ra: '15 32 36.71', dec: '-19 40 13.3', mag: 5.50};
star['HD 132833'] = {ra: '15 01 19.81', dec: '-02 45 17.5', mag: 5.52};
star['HD 135534'] = {ra: '15 16 23.03', dec: '-22 23 57.9', mag: 5.52};
star['ζ4 Lib'] = {ra: '15 32 55.23', dec: '-16 51 10.1', mag: 5.53, fd: 35};
star['30 Ser'] = {ra: '15 48 56.81', dec: '-03 49 06.7', mag: 5.53, fd: '(30)'};
star['50 Lib'] = {ra: '16 00 47.64', dec: '-08 24 40.8', mag: 5.53, fd: 50};
star['HD 136479'] = {ra: '15 21 07.64', dec: '-05 49 29.4', mag: 5.54};
star['ζ1 Lib'] = {ra: '15 28 15.40', dec: '-16 42 59.1', mag: 5.64, fd: 32};
star['HD 130529'] = {ra: '14 49 18.76', dec: '-24 15 05.3', mag: 5.68};
star['4 Lib'] = {ra: '14 43 13.57', dec: '-24 59 51.8', mag: 5.70, fd: 4};
star['Gliese 570'] = {ra: '14 57 27.35', dec: '-21 24 55.7', mag: 5.72};
star['HD 136956'] = {ra: '15 23 52.26', dec: '-12 22 09.9', mag: 5.72};
star['HD 134373'] = {ra: '15 10 18.65', dec: '-26 19 57.4', mag: 5.75};
star['ξ1 Lib'] = {ra: '14 54 22.91', dec: '-11 53 54.0', mag: 5.78, fd: 13};
star['HD 139254'] = {ra: '15 37 48.06', dec: '-23 08 29.5', mag: 5.79};
star['HD 129944'] = {ra: '14 46 06.75', dec: '-23 09 10.3', mag: 5.80};
star['ζ3 Lib'] = {ra: '15 30 40.39', dec: '-16 36 34.0', mag: 5.82, fd: 34};
star['HD 139329'] = {ra: '15 38 16.24', dec: '-21 00 58.2', mag: 5.82};
star['HD 135051'] = {ra: '15 13 53.32', dec: '-26 11 36.8', mag: 5.84};
star['18 Lib'] = {ra: '14 58 53.64', dec: '-11 08 37.9', mag: 5.88, fd: 18};
star['47 Lib'] = {ra: '15 55 00.37', dec: '-19 22 58.4', mag: 5.95, fd: 47};
star['HD 130157'] = {ra: '14 47 13.66', dec: '-21 19 29.6', mag: 6.05};
star['ι2 Lib'] = {ra: '15 13 19.22', dec: '-19 38 50.8', mag: 6.07, fd: 25};
star['HD 132375'] = {ra: '14 58 52.99', dec: '-04 59 20.4', mag: 6.08};
star['HD 142703'] = {ra: '15 56 33.33', dec: '-14 49 45.7', mag: 6.12};
star['HD 133670'] = {ra: '15 06 27.10', dec: '-22 01 54.1', mag: 6.13};
star['ο Lib'] = {ra: '15 21 01.36', dec: '-15 32 54.2', mag: 6.14, fd: 29};
star['HD 130557'] = {ra: '14 48 54.10', dec: '-00 50 51.7', mag: 6.15};
star['28 Lib'] = {ra: '15 20 53.68', dec: '-18 09 30.6', mag: 6.16, fd: 28};
star['26 Lib'] = {ra: '15 14 33.77', dec: '-17 46 06.7', mag: 6.18, fd: 26};
star['HD 139160'] = {ra: '15 37 28.51', dec: '-26 16 47.3', mag: 6.19};
star['HD 128429'] = {ra: '14 37 00.30', dec: '-12 18 22.4', mag: 6.20};
star['HD 138105'] = {ra: '15 30 36.25', dec: '-20 43 42.5', mag: 6.20};
star['HD 141853'] = {ra: '15 51 38.41', dec: '-14 08 00.8', mag: 6.20};
star['2 Lib'] = {ra: '14 23 25.63', dec: '-11 42 50.0', mag: 6.22, fd: 2};
star['HD 140986'] = {ra: '15 46 45.43', dec: '-06 07 13.3', mag: 6.24};
star['HD 138488'] = {ra: '15 33 09.53', dec: '-24 29 25.2', mag: 6.26};
star['10 Lib'] = {ra: '14 51 51.31', dec: '-18 21 19.2', mag: 6.27, fd: 10};
star['HD 135367'] = {ra: '15 14 50.61', dec: '-05 30 09.3', mag: 6.28};
star['HD 138268'] = {ra: '15 31 43.45', dec: '-20 09 53.4', mag: 6.28};
star['HD 140301'] = {ra: '15 43 24.86', dec: '-15 02 34.8', mag: 6.30};
star['HD 139290'] = {ra: '15 38 15.80', dec: '-28 12 23.8', mag: 6.32};
star['HD 142640'] = {ra: '15 56 14.41', dec: '-14 23 57.2', mag: 6.32};
star['5 Lib'] = {ra: '14 45 57.78', dec: '-15 27 34.4', mag: 6.33, fd: 5};
star['HD 139518'] = {ra: '15 39 21.39', dec: '-23 09 00.6', mag: 6.33};
star['HD 130325'] = {ra: '14 47 54.92', dec: '-12 50 23.2', mag: 6.34};
star['HD 132953'] = {ra: '15 02 08.59', dec: '-07 34 31.1', mag: 6.38};
star['22 Lib'] = {ra: '15 06 49.10', dec: '-16 29 03.6', mag: 6.41, fd: 22};
star['HD 129980'] = {ra: '14 46 10.92', dec: '-21 10 32.6', mag: 6.43};
star['HD 137798'] = {ra: '15 28 58.69', dec: '-28 52 00.5', mag: 6.43};
star['23 Lib'] = {ra: '15 13 28.93', dec: '-25 18 33.0', mag: 6.45, fd: 23};
star['HD 139461'] = {ra: '15 38 40.07', dec: '-08 47 29.1', mag: 6.45};
star['30 Lib'] = {ra: '15 23 01.78', dec: '-15 08 02.7', mag: 6.46, fd: 30};
star['HD 134946'] = {ra: '15 13 17.43', dec: '-24 00 29.8', mag: 6.47};
star['HD 126251'] = {ra: '14 24 40.90', dec: '-11 40 10.7', mag: 6.49};
star['HD 126363'] = {ra: '14 25 17.63', dec: '-13 21 11.4', mag: 6.49};
star['HD 127964'] = {ra: '14 34 50.72', dec: '-20 26 21.8', mag: 6.49};
star['HD 134758'] = {ra: '15 12 12.04', dec: '-19 06 23.1', mag: 6.49};
star['HD 140722'] = {ra: '15 46 12.89', dec: '-28 03 41.1', mag: 6.49};
star['HD 136646'] = {ra: '15 22 45.19', dec: '-29 20 30.9', mag: 6.50};
star['17 Lib'] = {ra: '14 58 13.42', dec: '-11 09 17.1', mag: 6.61, fd: 17};
star['33 Lib'] = {ra: '15 29 34.78', dec: '-17 26 27.4', mag: 6.69, fd: 33};
let edge = [['θ Lib', 'γ Lib'], ['γ Lib', 'β Lib'], ['β Lib', 'α2 Lib'], ['α2 Lib', 'σ Lib']];
let offsetX, offsetY;
let wrap = false;
let decMin, decMax;
let raMin = 0;
let raMax;
let xMin, xMax;
let yMin, yMax;
/**
* drawGrids function
* @since 0.1
*/
const drawGrids = function() {
dec = 0;
y1 = 0;
y2 = height;
for (ra = raMin; ra <= raMax; ra++) {
xy = raDec2xy(String(ra), String(dec));
s.line(xy[0], y1, xy[0], y2).attr({stroke: 'dimgray', strokeWidth: 1});
raTxt = ra;
if (wrap & (raTxt < 0)) {
raTxt += 24;
}
s.text(xy[0], 5 + 12, raTxt + 'h').attr({fill: 'dimgray', 'font-size': 12});
}
x1 = 0;
x2 = width;
for (dec = decMin; dec <= decMax + 10; dec += 10) {
if (dec > 0) {
strDec = '+' + dec;
} else {
strDec = String(dec);
}
xy = raDec2xy(String(ra), strDec);
s.line(x1, xy[1], x2, xy[1]).attr({stroke: 'dimgray', strokeWidth: 1});
s.text(x1, xy[1] + 12, strDec).attr({fill: 'dimgray', 'font-size': 12});
}
}
/**
* getMinMax function - Get minimum and maximum coordinates
* @since 0.1
* return decMin - minimum declination
* return decMax - maximum declination
* return raMin - minimum right ascension
* return raMax - maximum right ascension
* return xMin - minimum x coordinate
* return xMax - maximum x coordinate
* return yMin - minimum y coordinate
* return yMax - maximum y coordinate
*/
const getMinMax = function() {
first = true;
Object.keys(star).forEach(function(key) {
ra = star[key].ra;
dec = star[key].dec;
xy = raDec2xy(ra, dec);
ra1 = Number(ra.substring(0, 2));
if (wrap & (12 < ra1)) {
ra1 -= 24;
}
if (first) {
raMin = ra1;
decMin = Number(dec.substring(0, 3));
raMax = ra1;
decMax = Number(dec.substring(0, 3));
xMin = xy[0];
yMin = xy[1];
xMax = xy[0];
yMax = xy[1];
first = false;
} else {
raMin = Math.min(ra1, raMin);
decMin = Math.min(dec.substring(0, 3), decMin);
raMax = Math.max(ra1, raMax);
decMax = Math.max(dec.substring(0, 3), decMax);
xMin = Math.min(xy[0], xMin);
yMin = Math.min(xy[1], yMin);
xMax = Math.max(xy[0], xMax);
yMax = Math.max(xy[1], yMax);
}
});
decMin = Math.floor(decMin / 10) * 10;
raMax = raMax + 1;
decMax = decMax + 1;
}
/**
* raDec2xy function - Convert ra, dec to x, y
* @since 0.1
* @param ra - right ascension
* @param dec - declination
* @return [x, y] - coordinates in graphics window
*/
const raDec2xy = function(ra, dec) {
let x = Number(ra.substring(0, 2));
if (wrap & (12 < x)) {
x -= 24;
}
x = x + ra.substring(3, 5) / 60.;
x = x + ra.substring(6, 11) / 3600.;
x = offsetX - (x - raMin) * 3600. / 24.;
let y = Number(dec.substring(1, 3));
y = y + dec.substring(4, 6) / 60.;
y = y + dec.substring(7, 12) / 3600.;
y = y * (dec.substring(0, 1) + '1');
y = offsetY - y * 3600. / 360.;
return [x, y];
}
/**
* onload function
* @since 0.3
*/
window.onload = function() {
// Get svg element
s = Snap('#Zodiac');
// Move g elements
let dx = 230, dy = 60;
let g = Snap.select('#Libra');
g.transform('tlanslate(' + dx + ',' + dy + ')');
// Get parameters from the zodiac
offsetX = 0;
offsetY = 0;
getMinMax();
offsetX = -xMin - 1750;
offsetY = -yMin + 30;
drawGrids();
// Draw edges in the zodiac
for (i = 0; i < edge.length; i++) {
e = edge[i];
ra = star[e[0]].ra;
dec = star[e[0]].dec;
xy = raDec2xy(ra, dec);
x1 = xy[0];
y1 = xy[1];
ra = star[e[1]].ra;
dec = star[e[1]].dec;
xy = raDec2xy(ra, dec);
x2 = xy[0];
y2 = xy[1];
//<line x1="" y1="" x2="" y2="" stroke="darkgray"/>
s.line(x1, y1, x2, y2).attr({stroke: 'darkgray', strokeWidth: 1});
}
// Draw stars in the zodiac
Object.keys(star).forEach(function(key) {
ra = star[key].ra;
dec = star[key].dec;
xy = raDec2xy(ra, dec);
cx = xy[0];
cy = xy[1];
mag = star[key].mag;
r = 6 / mag;
//<ellipse cx="" cy="" rx="" ry="" fill="white"/>
s.ellipse(cx, cy, r, r).attr({fill: 'white'});
});
//<text transform="matrix(1 0 0 1 46 240)" style="font-family: 'Curlz MT'; font-size: 32px;">Libra</text>
s.text(46, 240 + 32, 'Libra').attr({fill: 'white', 'font-family': 'Curlz MT', 'font-size': 32});
//<text transform="matrix(1 0 0 1 40 270)" style="font-family: 'Segoe UI Symbol'; font-size: 96px;">♎</text>
s.text(40, 270 + 96, '♎').attr({fill: 'white', 'font-family': 'Segoe UI Symbol', 'font-size': 96});
// Get generated SVG code
let svgText = s.toString();
// Show the code with additional new lines
let codeNode = document.getElementById('code');
codeNode.textContent = svgText.replace(/><([^/])/g, '>\n<$1');
}
このプログラムは以下の情報またはソフトウェアを参照しています。
