読者です 読者をやめる 読者になる 読者になる

はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

SVG

How to create math SVG images by Mathjax-node(Node.js)

How to create math SVG images by Mathjax-node(Node.js) 数式をSVG画像化するメモ. 目次 環境 インストール 数式出力 SVG出力 MathML出力 参考リンク 環境 Wubdiws10 Node.js v6.10.3 npm 4.5.0

Atom にPlantUML を導入

Atom にPlantUML を導入 こちらで紹介されているRedmine でPlantUMLプラグインを導入してUML図を描くというのものをみて、ATOMでもプラグインで使えるようなのでメモ。 Redmine で技術仕様書を書こう | Aiming 開発者ブログ 目次 環境 PlantUMLとは AtomにPl…

CreateJS でハロウィン的なアニメーションつくってみた

CreateJS でハロウィン的なムービーつくってみた 目次 アニメーション 関連リンク アニメーション デ○モンが11月から劇場版?をやるとかでそれ関係のネタです。 codepen.io Github hosting: haloween2015 Github:github.com 感想 今回は、InkscapeでSVGのス…

CreateJS でSVG画像を扱う

CreateJS でSVG画像を扱う CreateJS でSVG を扱うときのメモ。 目次 CreateJSのバージョン CreateJSでSVGを描画 PreloadJSでSVGの読み込み 読み込み成功時のコールバック Bitmapインスタンスにして描画 参考リンク 関連リンク

SVGのpreserveAspectRaitoとCanvasのdrawImage

SVGのpreserveAspectRaitoとCanvasのdrawImage SVGの preserveAspectRatio と ブラウザによってCanvas のdrawImage の仕様が違ったのでメモ。 目次 ブラウザ環境 SVG のpreserveAspectRatio preserveAspectRatioプロパティが未指定の場合 CanvasのdrawImage …

SVG画像を canvgでCanvas に変換してみる

SVG画像を canvgでCanvas に変換してみる SVG画像を canvgでCanvas で扱えるように変換してみたのでメモ。 目次 canvg とは 類似ツール サンプル 参考リンク canvg とは SVGコードをCanvas用のコードへ変換してくれるJavaScriptライブラリです。 MITライセン…

SVG1.1 SVG 内部でJavaScirpt を動かす

SVG1.1 SVG 内部でJavaScirpt を動かす SVG では、内部にJavaSciript(JS) を書くことができます。 したがって、animate などよりも複雑なアニメーションなどを行うことができます(その分重くなると思いますが。。)。 目次 SVG 内でのJS の書き方 JS の書か…

SVG1.1 で変形・アニメーション

SVG1.1 で変形・アニメーション SVG も、CSS3 で扱えるようなtransoform やanimate を使うことができます。 それらについて、まとめておきます。 目次 変形(transform) アニメーション animate animatetransform animatemotion 参考リンク 関連リンク

SVG1.1 グループ化について(g, symbol, defs)

SVG1.1 グループ化について(g, symbol, defs) 前回は、SVG で扱える基本図形の話でした。 今回は、SVG1.1 で使えるグループ化についてのメモです。 SVG の各図形は、パワポのグループ化のように、まとめて扱うことができます。 目次 g タグ symbol タグ defs…

SVG1.1 の基本図形のメモ

SVG1.1 の基本図形のメモ 昨今のレスポンシブ時代に見直されている SVG ファイルの基本的な図形描画を試したので、それについてのメモです。 目次 簡単な概要 対応環境 SVG 画像の読み込み 基本図形 四角形(rect) 表示範囲(viewport と viewbox) 線(line) 円…