CINXE.COM
ドット絵風フィルター
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ドット絵風フィルター</title> <link rel="stylesheet" href="style.css"/> <style> .image { filter: url(#filter); } </style> </head> <body> <p>imgタグで描画</p> <img src="images/image-1.jpg" width="512" height="384" alt="" class="image"> <p>SVGのimageタグで描画</p> <svg width="512" height="384" xmlns="http://www.w3.org/2000/svg"> <image href="images/image-1.jpg" width="100%" height="100%" class="image"/> </svg> <svg width="480" height="640" xmlns="http://www.w3.org/2000/svg"> <image href="images/image-2.jpg" width="100%" height="100%" class="image"/> </svg> <svg width="512" height="512" xmlns="http://www.w3.org/2000/svg"> <image href="images/image-3.jpg" width="100%" height="100%" class="image"/> </svg> <!-- フィルター --> <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg"> <filter id="filter"> <!-- 色の階調を減らす --> <feComponentTransfer result="color"> <feFuncR type="discrete" tableValues="0,0.5,1"/> <feFuncG type="discrete" tableValues="0,0.5,1"/> <feFuncB type="discrete" tableValues="0,0.5,1"/> </feComponentTransfer> <!-- タイル --> <feFlood x="2" y="2" width="1" height="1"/> <feComposite in2="" width="4" height="4"/> <feTile /> <!-- 画像とタイルの重なり部分を合成 --> <feComposite in="color" in2="" operator="in"/> <!-- タイルのサイズを膨張 --> <feMorphology operator="dilate" radius="2"/> </filter> </svg> <a href="../index.html">目次へ戻る</a> </body> </html>