JS+SVGで液晶画面風の表示をつくる | tech - 氾濫原
液晶風の画面は決まった形をオン・オフするだけなので、canvas にコードで描くのは大変なだけで無駄が多い。かといってセグメントを1つ1つ画像にわけて座標指定で配置していくのも面倒くさい。 と考えていくと SVG を埋めこんで、SVG の要素を JS で操作するのが効率が良い。ワークフローとしては SVG の作成と JS の実装で綺麗に境界を作ることができる。 Inkscape Inkscape の良いところは以下の点 XML エディタが UI と連動している レイヤーやオブジェクトを選択すると該当箇所にエディタ上で跳べる 構造をコントロールしやすい 画像を編集するというより SVG の XML を編集するUIというイメージ Inkscape でオブジェクトに名前をつけると、svg 上では inkscape:label 属性に入る。これを利用して JS から操作すれば Inkscape で
SVGで画面全体に斜め線や曲線を引く
SVGで画面全体に斜め線や曲線を引く 一昔前だと単純な斜め線とか円をバックに置きたいときは画像で作ってましたが、最近ではわりとSVGを使うことが多いようです。 SVGの良いところはベクターなので画面全体に配置しても荒くなったりしないとか、コードで作成できるので後々アニメーションなどもできたりします。 ここでは単純な図形ですが画面全体に表示する方法をご紹介します。 投稿日2015年09月29日 更新日2015年10月14日 準備 まずはSVGをHTML内に記述する方法です。 HTML <div id="wrap"> <div class="description"> ここにコンテンツが入ります。 </div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="
Rune.js Documentation
Rune.js Rune.js is a JavaScript library for programming graphic design systems with SVG in both the browser or node.js. It features a chainable drawing API, an unobtrusive scene graph, and a range of features aimed specifically at graphic designers: native support for color conversion, grid systems, typography, pixel iteration, as well as an expanding set of computational geometry helpers. Oh, and
Viz.js·Web上でGraphvizをSVGでレンダリング MOONGIFT
フローチャートなどの高度なグラフを描こうと思った時に使われるのがGraphvizです。テキストベースで記述していくだけでできるというのはやはり手軽です。しかしローカルソフトウェアをインストールしたり、セットアップしたりするのは面倒と感じる人も多いでしょう。 そこでさらに再利用性を高めてくれるのがViz.jsです。WebベースでGraphvizを使えるようにしてくれます。可能にするのはまたしてもEmscriptenなのですが、面白さを体感してください。 例として以下のようにGraphvizのDOT言語をそのままscriptタグに記述します。 <script type="text/vnd.graphviz" id="cluster"> digraph G { subgraph cluster_0 { style=filled; color=lightgrey; node [style=fill
Snap.svg - The JavaScript SVG library for the modern web.
Why SVG (and Snap)? SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. Modern features for modern browsers Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking
米Adobe、SVGを扱うオープンソースのJavaScriptライブラリ「Snap.svg」を公開
「Snap.svg」は、SVGコンテンツのアニメーションと操作のための強力で直感的なAPIで、マスキング、クリッピング、パターン、フルグラデーション、グループ化などの機能によってコンテンツをインタラクティブで魅力的にできる。「Adobe Edge」ツール＆サービスを補完し、今日のモダンなWebブラウザに求められる強力な描画能力とパフォーマンスに優れたグラフィックス機能をサポートする。 Internet Explorer 6以降のWebブラウザ上でSVGを扱うためのデファクトスタンダード「Raphael」の作者である、アドビのディミトリ・ブラノフスキー（Dmitry Baranovskiy）氏が新たに作成しており、Apache 2ライセンスに基づいてリリースされる。なお、「Raphael」とは異なり、Internet Explorer 9以降、Safari、Chrome、Firefox、Op
adobe-adc.jp - このウェブサイトは販売用です！ - adobe adc リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
HTML5のSVG + jQueryで画像の拡大縮小 | ECサイト｜システム開発会社｜スターフィールド
HTML5で本格的にサポートされている画像形式のSVG。 特徴のひとつに、jpg, gif, pngのようなビットマップ形式の画像と異なり、 どんなに拡大しても、画像が粗くならず、きれいに表示することができるという特徴があります。 今回は、その特徴を利用して、SVGの画像を拡大縮小するHTMLを組んでみました。 コチラがそのDEMO DEMO 地図AIデータ→http://kage-design.com/wp/?p=1061 SVGをHTMLに読み込む方法はいくつかありますが、 javascriptで読み込む方法を使いました。 参考→http://gihyo.jp/dev/feature/01/svg/0004?page=1
DOMマニピュレーションを効率化するWebアプリケーション向けJavaScriptライブラリ「Ractive.js」 | OSDN Magazine
英国ニュースメディアGuardianのインタラクティブチームは7月24日、開発者Rich Harris氏が開発するDOMマニピュレーションライブラリ「Ractive.js」を発表した。Webサイト上でインタラクティブな体験を容易に構築できるという。 Ractive.jsは、インタラクティブな体験を提供するにあたって課題だったデータバインディング、DOM操作、イベントハンドリングを効率よく行うために開発されたJavaScriptライブラリ。HTMLのパースやテンプレートの展開機能を持ち、DOMノードをユーザーが直接操作することなしに更新できるAPIを提供する。「スケジュールがタイト」というGuardianのニュースサイトで利用しており、Bill & Melinda Gates Foundationの支援を受けたGuardian Global Developmentが開発を一部支援した。 サー
SVG関連の操作・アニメーション処理をシンプルにかける「SVG.JS」:phpspot開発日誌
svg.js - A lightweight JavaScript library for manipulating and animating svg SVG関連の操作・アニメーション処理をシンプルにかける「SVG.JS」 ちょっと、SVG苦手だわ、と思った方はこうしたライブラリでトライしてみるのもいいかもしれません。 次のような分かりやすいコードでSVGを操ることが可能になります ライブラリも5KB程度なので、簡単な画像を描画するのならこちらでブラウザ上で描いちゃったほうが軽そうですね。 デモページ 関連エントリ SVGグラフィックを手書き風アニメーションさせられる「Lazy Line Painter」 SVGを使った高度なアニメーションを実現できるライブラリ「BonsaiJS」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」
POKER369 - IDN POKER, Situs Judi Poker Online, DominoQQ & Ceme
Mencari situs poker online nomor satu di indonesia tentunya hanya ada di IDNPLAY yang menjadi agen resmi idnpoker terpercaya sejak tahun 2010. Yang sudah berpengalaman dalam melayani dan membantu ratusan ribu member bettor poker. Tentunya segala kebutuhan dan kenyamanan member idn poker online menjadi prioritas utama kami selama 24jam penuh. Banyak pula aneka ragam jenis judi online lainnya yang b
BonsaiJS
Introduction Bonsai is a JavaScript graphics library. Bonsai's main features include: Architecturally separated runner and renderer iFrame, Worker and Node running contexts Paths Assets (Audio, Video, Images, Fonts, SubMovies) Keyframe and time based animations (easing functions too) Path morphing and much more... Community For the finer details, see the documentation. #bonsaijs on irc.freenode.ne
SIE 5の公開 - プラグインレスでSVGを表示する「SIE」開発ブログ
2012年10月23日に、SIE 5を公開しました。いくつかのバグを修正しています。 ダウンロード (無償) http://sourceforge.jp/projects/sie/downloads/57166/sie-5.zip/ 変更履歴 2012-10-23 version 5 (Commit: 347191024ff2779abc811b1cb27a6630fc2f4cfd) 即時関数を使って、Coreモジュールを軽量化 insertBeforeメソッドの循環参照の問題を解決 SVGSVGElementのメソッドの記述量を減らした Documentに関して、Specの編集 getElementByIdメソッドの修正 チケット #29885 「onevent属性でコード内の特定の変数がundefinedとなる」を修正 (beta fixed) チケット #29831 「animate
WebPlatform Docs
WebPlatform Docs welcomes all comments. If you want to comment, please register or log in. It is free. This tool helps to make and review comments inline. How to Use insert instructions, with images, here Welcome to Web Platform Docs Web Platform Docs is a new community-driven site that aims to become a comprehensive and authoritative source for web developer documentation. Even though Web Platf
svgフォント編集スクリプト
ヒント お手持ちのsvg画像からフォントとかパスを抽出してsvgフォント化することができます． フォント情報が見つからなかった場合，パスを抽出します．一つのパスを文字として解釈します． ファイル読み込み時にパスのリサイズや位置の調整を行うことができます．いろいろ試してみましょう． 文字をクリックすると内容を編集することができます．位置の微調整等を行う際にご利用下さい． 余りに複雑なsvgファイルを読み込んだ場合，スクリプトが応答しなくなる場合があります．（このような図形はそもそもフォントとして不適でしょう．） 本スクリプトで生成したsvgフォントファイルは全ての環境で正しく動作するとは限りません．webkit系/operaのブラウザで試すか，下のサービスを使って他の形式に変換して使いましょう． ここで生成したsvgフォントファイルはicomoonでeot,ttf,woff形式に変換できます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Angelmmiguel/svgi: 🔎 The SVG inspection tool
tex-equation-to-svg
jQueryを使った外部SVGファイルの読み込み | スターフィールド株式会社
Charming Python: Functional programming in Python, Part 3
https://www.svgjs.com/