时间戳

首页 > 解决方案 > 等边六边形带圆角，里面有边框和文字，我不能反映边框为什么？

html - 等边六边形带圆角，里面有边框和文字，我不能反映边框为什么？

问题描述

有等边六边形，里面有圆角和边框 css 文本。

一切都很好，我不明白为什么我不能反映左上角的边框：

截屏

<div class="universe__item">

  <div class='hex border'>
    <svg xmlns="http://www.w3.org/2000/svg" width="292" height="292" preserveAspectRatio='none'>
          <path d="
              M138 7.04
                a14 14 0 0 1 14 0
                l108.97560733739 62.91
                a14 14 0 0 1 7 12.12
                l0 125.83419246269
                a14 14 0 0 1 -7 12.12
                l-108.97560733739 62.91
                a14 14 0 0 1 -14 0
                l-108.97560733739 -62.91
                a14 14 0 0 1 -7 -12.12
                l 2.004110622581e-13 -125.83
                a14 14 0 0 1 7 -12.12" vector-effect='non-scaling-stroke'>
            </path>
        </svg>

    <span>Some<br>text</span>
  </div>
</div>

标签： htmlcsssvg

解决方案

您没有使用 关闭路径z。例如，-12.12z

body {
  background: red;
}

svg {
  stroke: white;
  stroke-width:3;
}
<div class="universe__item">

  <div class='hex border'>
    <svg xmlns="http://www.w3.org/2000/svg" width="292" height="292" preserveAspectRatio='none'>
          <path d="
              M138 7.04
                a14 14 0 0 1 14 0
                l108.97560733739 62.91
                a14 14 0 0 1 7 12.12
                l0 125.83419246269
                a14 14 0 0 1 -7 12.12
                l-108.97560733739 62.91
                a14 14 0 0 1 -14 0
                l-108.97560733739 -62.91
                a14 14 0 0 1 -7 -12.12
                l 2.004110622581e-13 -125.83
                a14 14 0 0 1 7 -12.12z">
            </path>
        </svg>
  </div>
</div>

推荐阅读