SVGでドット絵を描く

一括色変換とPNG画像出力可能

座標内の要素を書き換える

座標に足していくスタイル

view source

JavaScript

var svg = document.getElementById('svg');
var ns = 'http://www.w3.org/2000/svg';
var xlink = 'http://www.w3.org/1999/xlink';
var w = 512;
var h = 512;
var zoom = 1;
var dotSize = 32;
svg.style.width = w * zoom;
svg.style.height = h * zoom;

var palette = 0;
var colors = [
  '#000000',
  '#ffffff',
  '#ff0000',
  '#00ff00',
  '#0000ff',
  '#ffff00',
  '#00ffff',
  '#ff00ff',
  '#888888',
  'none',
];
var currentColor = colors[0];
//fill="none" ではclickイベントが発生しない
//rgba(0,0,0,0)のような透明色でもclickイベントが発生しない

var rect = document.getElementById('d');
rect.setAttribute('width', dotSize);
rect.setAttribute('height', dotSize);


svg.addEventListener('click', function(e){
  var use = document.createElementNS(ns, 'use');
  use.setAttributeNS(xlink, 'xlink:href', '#d');
  use.setAttribute('x', Math.floor(e.offsetX / (dotSize*zoom))*dotSize);
  use.setAttribute('y', Math.floor(e.offsetY / (dotSize*zoom))*dotSize);
  use.setAttribute('fill', '#00f');
  svg.appendChild(use);
});



var svg2 = document.getElementById('svg2');
svg2.style.width = w * zoom;
svg2.style.height = h * zoom;
for(var j=0;j<h/dotSize;j++){
  for(var i=0;i<w/dotSize;i++){
    var use = document.createElementNS(ns, 'use');
    var color = 'rgba(0,0,0,0)';
    use.setAttributeNS(xlink, 'xlink:href', '#d');
    use.setAttribute('x', i*dotSize);
    use.setAttribute('y', j*dotSize);
    use.setAttribute('fill', color);
    use.setAttribute('class', 'c0');
    svg2.appendChild(use);
    use.addEventListener('click', function(e){
      var fill = e.target.getAttribute('fill');
      if(fill === '#00f'){
        e.target.setAttribute('fill', color);
      } else {
        e.target.setAttribute('fill', currentColor);
        e.target.setAttribute('class', 'c'+palette);
      }
      if(palette===0){
        e.target.setAttribute('fill', 'rgba(0,0,0,0.1)');
      }
    });
  }
}

$(function(){
  $svg2 = $('#svg2');
  $form = $('<form>');
  $svg2.after($form);
  
  colors.forEach(function(v, i){
    $input = $('<input>',{type:'color', colorformat:'rgba' ,value:v});
    $input.on('change', function(){
      var vc = $(this).val();
      if(v==='none'){vc='none';}
      $('.c'+i).attr({fill:vc});
      currentColor = vc;
    });
    $input.on('click', function(){
      var vc = $(this).val();
      if(v==='none'){vc='none';}
      palette = i;
      currentColor = vc;
    });
    $form.append($input);
  });
})



var toPngButton = document.getElementById('toPng');
var toPngArea = document.getElementById('toPngArea');
toPngButton.addEventListener('click', function(e){
    $(svg2).removeClass('tile');
    var canvas = document.createElement('canvas');
    
    var html = svg2.outerHTML;
    html = html.replace(/<(\/?)svg([^>]*)?>/img, '<$1g>');
    console.log(html);

    SVG2Bitmap(document.querySelector('#svg2'), function(canvas, dataURL){
        toPngArea.innerHTML = '';
        toPngArea.appendChild(canvas);
    });

    //canvas.setAttribute('width', w);
    //canvas.setAttribute('height', h);
    //canvg(canvas, html);

    //toPngArea.innerHTML = '';
    //toPngArea.appendChild(canvas);

});

CSS

#svg2.tile{
}
#svg2:hover{
  background-image:url('none.png');
}
#svg2 use:hover{
  background-color:#fff;
  opacity:.8;
  fill:#ffffff;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-svg/svg-dot/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。