SVG.js-Raphaëlにふさわしいライバル

こんにちは、ハラジテリ。 GitHubのすばらしい発見-SVG.js-SVGの便利な操作とアニメーションを皆さんと共有したいと思います 。 このライブラリに注意を向けた3つのことについてお話したいと思います。 最も単純で最も重要なことは、網膜の出現により、SVGディスプレイの人気が高まり、以前よりも必要性が高まっていることです。 SVG.min.jsの重量はGzipで34 kbと9 kbで、これはRaphaëlの数倍小さく、デザインやエフェクトに寄付できるものです 。 3kbに縮小された SVG.filter.jsは、 webkit-filterプロパティの優れたクロスブラウザーアナログです。

便利な構文：

var draw = SVG('canvas').size(300, 300) var rect = draw.rect(100, 100).attr({ fill: '#f06' }); rect.animate().move(150, 150); rect.animate({ ease: '<', delay: 1500 }).attr({ fill: '#f03' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

機能：

• サイズ、位置、変換（変換、回転、傾斜、スケール、マトリックス）、色のアニメーション
• 要素のマスキングとクリッピング（ この記事では 、同様のCSSプロパティについて書きました ）
• モジュール構造、拡張機能の記述の容易さ

   SVG.extend(SVG.Shape, { paintRed: function() { return this.fill({ color: 'red' }) } }) SVG.extend(SVG.Ellipse, { paintRed: function() { return this.fill({ color: 'orangered' }) } })
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

• テキストパス（アニメーションをサポート）
• アイテムのグループ化
• 動的勾配
• イベント
• 明確なドキュメント

既存のプラグイン

• svg.filter.js -SVGフィルターのセット（ガウスぼかし、水平ぼかし、 彩度低下 、飽和など）
• svg.draggable.js-アイテムをドラッグアンドドロップできます
• svg.easing.js-アニメーションのイージングメソッド
• svg.path.js-曲線を作成するための非常に便利なプラグイン（ デモ ）
• svg.math.js-数学関数のセット
• svg.foreignobject.js - foreignObjectの実装（任意のHTMLが挿入されるSVG要素）
• SVG Canvas全体または単一のアイテムをインポートおよびエクスポートするためのsvg.export.jsおよびsvg.import.jsプラグイン

ブラウザサポート：

デスクトップ：

• Firefox 3以降
• Chrome 4+
• Safari 3.2以降
• Opera 9+
• IE9 +

モバイル

• iOS Safari 3.2以降
• Androidブラウザ3+
• Opera Mobile 10+
• Chrome for Android 18+
• Firefox for Android 15以降

ご清聴ありがとうございました。