svgで画像に文字を入れる
こうなっている
svgのimage要素で外部画像を表示するをベースにする
foreignObjectを使ってdivタグを埋め込んでいるだけ
htmlCopied!
<svg viewBox="0 0 500 500" width="500" height="500"> <image x="0" y="0" width="500" height="500" xlink:href="data:image/png;base64,..."> </image> <foreignObject xmlns="http://www.w3.org/2000/svg" width="500" height="30" x="0" y="470"> <html xmlns="http://www.w3.org/1999/xhtml"> <style> .a { text-align: right; } a { font-family: 'Courier New'; color: #fff; cursor: pointer; text-decoration: none; font-size: 25px; font-weight: bold; margin-right: 7px; text-shadow: 1px 1px 0 #111, -1px 1px 0 #111, 1px -1px 0 #111, -1px -1px 0 #111; } a:hover { color: #2962FF; text-decoration: underline; text-shadow: 0 0; } </style> <div class="a"> <a href="https://miil.me/p/c5zg0" target="_blank">2018-04-19 17:41</a> </div> </html> </foreignObject></svg>例