記事一覧
トラブルシューティング日誌(にっし) - Chrome(クロム)の検索(けんさく)エンジンがYahoo!(ヤフー)になる件(けん)
いつの間にかパソコンのブラウザー Chrome のアドレスバーにヤフーのアイコンが表示され、Google 検索ではなく、Yahoo! 検索になっていたので、設定を確認してみました。
本来なら「Google」となっているはずのところが「セキュア サーチ」になっていました。通知でセキュアなサーチにするかと訊かれて設定を変更してしまったかもしれないと思いました。気持ち悪いので元に戻しました。
模様(もよう)をSVG(エスブイジー)にする
青海波という模様を SVG にしてみました。
このような繰り返しの模様を SVG で作るのは結構大変です。
一つの波だけならこんな感じです。
<svg id="Pattern" xmlns="http://www.w3.org/2000/svg" width="640" height="400"> <rect x="0" y="0" width="640" height="400" s
引用符(いんようふ)
ここ最近、毎月星座のプログラムを書いています。今月はさそり座です。
Snap.svg というライブラリでさそりの SVG に赤経、赤緯の線や星などを付け加えています。
完成した SVG のコードを絵の下に表示しているのですが、Scorpius と ♏ の表示部分が、
<text x="506" y="272" fill="#ffffff" style="font-family: 'Curlz
polygon(ポリゴン)で卵(たまご)
SVG の polygon 要素を使って卵の絵を描きました。polygon とは多角形のことです。
この大きさだと卵に見えますが、実際は64角形です。polygon のコードは以下の通りです。
<polygon points="235.0,200.0 235.4,204.5 236.6,209.1 238.7,213.8 241.5,218.6 245.0,223.4 249.3,228.1
角丸三角(かどまるさんかく)
今月も星座の絵をSVGで作りました。今月はしし座です。
いつものように Small Basic から持ってきた SVG を Illustrator でちょこっと直しました。今回直したのは目と鼻ですが、鼻について解説します。
元々三角形だった鼻を右側のレイヤーで選択し、左側のツールで「ダイレクト選択」を選ぶと、三角形のそれぞれの角にちいさな円が現れます。この円をドラッグすると角丸三角形に変更する
Illustrator(イラレ)で表示(ひょうじ)できないSVG(エスブイジー)
Adobe Illustrator は SVG ファイルを読み込んで編集し SVG ファイルとして出力することができます。
ところが、私の作った Shapes という Small Basic のプログラムで出力した SVG ファイル（以下のリスト）を Illustrator に読み込んでも表示されません。
<svg width="598" height="428"> <defs> <g
Illustrator(イラレ)のシェイプ形成(けいせい)
今回作成したのはふたご座の絵です。
この絵はもともとは Small Basic のプログラムとして作成したものです。
この絵を Shapes というツールを使って SVG に変換し、Adobe Illustrator で描き直しました。
Illustrator に「シェイプ形成」というツールがあり、ふたごの髪の毛はこのツールを使って楕円をつなぎました。
このプログラムに関する詳細はブログ「
星座(せいざ)の絵(え)
星座の絵をSVGで描いてみました。
以前作成した Small Basic のプログラムを JavaScript に置き換えたものです。
詳しい内容についてはブログ「JavaScript (58) おうし座」をご覧ください。
魚(さかな)を変(か)えてみた
水族館の魚を変えてみることにしました。
上の絵は娘が小学校の頃、イベントの魚釣り用に使ったものです。
この中の魚の骨をSVGにしてみました。SVGはちょっと長いですがこんな感じです。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sv
水族館(すいぞくかん)
水族館のアニメーションを SVG で作ってみました。
JavaScript のプログラムで三角関数（cos）を使って魚の幅を縮小させています。
/** * moveFish function * @since 0.1 */const moveFish = function() { for (i = 0; i < max; i++) { a[i] += da[i];
「の」の字(じ)を描(か)いてみた
SVGでひらがなの「の」を表現してみました。
前回のロケットの形と同様、path 要素を使っています。
SVG.js で生成した「の」の字のコードは以下のようになりました。M は移動 (move)、L は直線 (line)、A は円弧 (arc)を表しています。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink
path(パス)要素(ようそ)使(つか)ってみた
前回のロケットをいろいろ改良してみました。改良点は以下の通りです。
ロケット頭部を円弧に変更しました。
ロケットの高さを変更できるようにしました。
ロケットを左に90°回転するようにしました。
横方向への移動を加えました。
// <path d="M22,96 // A595,204 0 0 1 92,0 // A595,204 0 0 1 162,96
ロケットの打(う)ち上(あ)げ
JavaScript のプログラムから SVG の画像を動かす準備が整ったので、今回は、いよいよアニメーションを実現します。
2015年に書いた SVG のコードではロケットを動かすために、下記の要領で SVG の animate 要素を使いました。
<use x="208" y="154" xlink:href="#g2"> <animate attributeName="y" begin