帶有圖像和文本的六邊形

Question

我用它畫六角形，我在上面加上svg。

我想在新行中添加圖像和文本。

我添加這種風格

  .hexagon > span { display: inline-block; transition: var(--hex-transition); } 

  <div class="hexagon color-angular"> <svg aria-labelledby="simpleicons-angular-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <title id="simpleicons-angular-icon">Angular icon</title> <path d="M9.93 12.645h4.134L11.996 7.74"/> <path d="M11.996.009L.686 3.988l1.725 14.76 9.585 5.243 9.588-5.238L23.308 3.99 11.996.01zm7.058 18.297h-2.636l-1.42-3.501H8.995l-1.42 3.501H4.937l7.06-15.648 7.057 15.648z"/> </svg> <span>Kitchen</span> </div> 

但是在圖片內顯示文字

Answer 1

 .hexagon>span { transition: var(--hex-transition); display: flex; justify-content: center } 

 <div class="hexagon color-angular"> <svg aria-labelledby="simpleicons-angular-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-angular-icon">Angular icon</title><path d="M9.93 12.645h4.134L11.996 7.74"/><path d="M11.996.009L.686 3.988l1.725 14.76 9.585 5.243 9.588-5.238L23.308 3.99 11.996.01zm7.058 18.297h-2.636l-1.42-3.501H8.995l-1.42 3.501H4.937l7.06-15.648 7.057 15.648z"/> <text x="10" y="20" text-anchor="" fill="white" font-size="1">Kitchen</text> </svg> </div> 

Answer 2

https://codepen.io/tushgraph/pen/agyrdO

.blokedtext{position:absolute; bottom:-12px; z-index:100; color:#000; font-family:arial; font-size:0.8em;}