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"> <!-- 横線（画像の暗い部分を描画） --> <fecolormatrix type="luminanceToAlpha"/> <feComponentTransfer result="mono"> <feFuncA type="linear" slope="-1" intercept="1"/> </feComponentTransfer> <feFlood x="0" y="0" width="600" height="2"/> <feComposite in2="" width="600" height="5"/> <feTile/> <feComposite in="mono" in2="" operator="in"/> <feGaussianBlur stdDeviation="1"/> <feComponentTransfer> <feFuncA type="linear" slope="15" intercept="-5"/> </feComponentTransfer> <feComponentTransfer result="stripe"> <!-- 線を青めにする --> <feFuncG type="linear" slope="-1" intercept="0.3"/> <feFuncB type="linear" slope="-1" intercept="1"/> <!-- アルファチャンネルのコントラストを下げる（少し透明にする） --> <feFuncA type="linear" slope="0.8"/> </feComponentTransfer> <!-- グラデーションマップ --> <feGaussianBlur stdDeviation="1" in="SourceGraphic"/> <feColorMatrix type="saturate" values="0"/> <feComponentTransfer> <feFuncR type="table" tableValues="0.34,0.53,0.33,1.00,0.82"/> <feFuncG type="table" tableValues="0.00,0.27,0.72,0.78,0.98"/> <feFuncB type="table" tableValues="0.14,0.41,0.75,0.89,1.00"/> </feComponentTransfer> <!-- 画像と横線を合成 --> <feBlend in2="stripe" mode="multiply" result="color"/> <!-- はみ出したフィルターを元の画像サイズでクリッピング --> <feComposite in2="SourceGraphic" operator="in"/> </filter> </svg> <a href="../index.html">目次へ戻る</a> </body> </html>