最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

theme development - How can I change this SVG shape that's generated?

programmeradmin3浏览0评论

I have a website I'm customizing for a client, and I'll admit I'm not too skilled with generating SVGs.

The site -- LINKED HERE uses a theme that has a built-in review feature and it currently uses a hexagon as the shape. My client wants it to be a square instead.

I've found the area with the shape in the Theme Files, but when I change the hexagon to a circle, it does not format properly nor looks all that well. I was hoping a simple new SVG path would solve the issue, but it doesn't seem to do so. It seems to completely throw off the formatting.

Any guidance or assistance you can give would be greatly appreciated

The code that generates the hexagon is below for reference. There is the "path" section in the middle that generates the hexagon.

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="" 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))
}

I have a website I'm customizing for a client, and I'll admit I'm not too skilled with generating SVGs.

The site -- LINKED HERE uses a theme that has a built-in review feature and it currently uses a hexagon as the shape. My client wants it to be a square instead.

I've found the area with the shape in the Theme Files, but when I change the hexagon to a circle, it does not format properly nor looks all that well. I was hoping a simple new SVG path would solve the issue, but it doesn't seem to do so. It seems to completely throw off the formatting.

Any guidance or assistance you can give would be greatly appreciated

The code that generates the hexagon is below for reference. There is the "path" section in the middle that generates the hexagon.

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/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))
}
Share Improve this question asked Apr 4, 2020 at 19:28 M. StrawM. Straw 1194 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

You can use some vector graphics editor to edit svg, then replace code in the theme, e.g. https://vectr/

发布评论

评论列表(0)

  1. 暂无评论