Question

我使用this绘制六边形，在其中添加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;}

带有图片和文字的六边形

2 个答案: