我有一个为客户定制的网站，我承认我不太擅长生成SVG。

网站--LINKED HERE 使用具有内置审阅功能的主题，该主题当前使用六边形作为形状。我的客户希望它是一个正方形。

我在主题文件中找到了具有该形状的区域，但当我将六边形更改为圆形时，它的格式不正确，看起来也不太好。我希望一个简单的新SVG路径可以解决这个问题，但它似乎没有这样做。它似乎完全摆脱了格式。

如果您能给予任何指导或帮助，我们将不胜感激

生成六边形的代码如下所示，以供参考。中间有一个生成六边形的“路径”部分。

PHP CODE

 $reviewScoreOutput = \'\';
        if(($reviewScore != \'\') && ($reviewScore > 0)) {
            $reviewScoreOutput .= \'<div class="overlay-center-y text-center">\';
            $reviewScoreOutput .= \'<div class="post-score-hexagon">\';
            $reviewScoreOutput .= \'<svg class="hexagon-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 184 210">\';
            $reviewScoreOutput .= \'<g>\';
            $reviewScoreOutput .= \'<path fill="#FC3C2D" stroke="#fff" stroke-width="10px" d="M81.40638795573723 2.9999999999999996Q86.60254037844386 0 91.7986928011505 2.9999999999999996L168.0089283341811 47Q173.20508075688772 50 173.20508075688772 56L173.20508075688772 144Q173.20508075688772 150 168.0089283341811 153L91.7986928011505 197Q86.60254037844386 200 81.40638795573723 197L5.196152422706632 153Q0 150 0 144L0 56Q0 50 5.196152422706632 47Z"></path>\';
            $reviewScoreOutput .= \'</g>\';
            $reviewScoreOutput .= \'</svg>\';
            $reviewScoreOutput .= \'<span class="post-score-value">\'.$reviewScore.\'</span>\';
            $reviewScoreOutput .= \'</div>\';
            $reviewScoreOutput .= \'</div>\';
        }

CSS CODE

.post-score {
display: inline-block;
color: #fff;
font-weight: 700;
line-height: 1;
text-align: center
}

.post-score__inner {
    position: relative;
    z-index: 10
}

.post-score-star {
    font-size: 1.2em;
    line-height: 1;
    color: #f7e74a
}

.hexagon-svg {
    width: 100%;
    height: auto
}

.post-score-hexagon {
    position: relative;
    display: inline-block;
    line-height: 0;
    vertical-align: middle
}

.post-score-hexagon .hexagon-svg {
    width: 50px;
    padding: 2px;
    -webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.25));
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.25));
    overflow: visible
}

@media(min-width:768px) {
    .post-score-hexagon .hexagon-svg {
        width: 60px
    }
}

@media(min-width:1200px) {
    .post-score-hexagon .hexagon-svg {
        width: 64px
    }
}

.post-score-hexagon .hexagon-svg g path {
    fill: #fc3c2d
}

.post-score-hexagon .post-score-value {
    position: absolute;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 10px rgba(0, 0, 0, .08)
}

@media(min-width:768px) {
    .post-score-hexagon .post-score-value {
        font-size: 22px
    }
}

@media(min-width:1200px) {
    .post-score-hexagon .post-score-value {
        font-size: 26px
    }
}

.post-score-hexagon--s .hexagon-svg {
    width: 50px
}

.post-score-hexagon--s .post-score-value {
    font-size: 20px
}

.post-score-hexagon--l .hexagon-svg {
    width: 100px
}

.post-score-hexagon--l .post-score-value {
    font-size: 42px
}

.post-score-hexagon--xl .hexagon-svg {
    width: 100px
}

@media(min-width:1200px) {
    .post-score-hexagon--xl .hexagon-svg {
        width: 120px
    }
}

.post-score-hexagon--xl .post-score-value {
    font-size: 42px
}

@media(min-width:1200px) {
    .post-score-hexagon--xl .post-score-value {
        font-size: 50px
    }
}

.mnmd-review .post-score-hexagon .hexagon-svg {
    -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3))
}