如何制作六边形 SVG 形状的圆角？

Question

T 创建了这个 Codepen 来展示我所拥有的 -

https://codepen.io/rahul0310/pen/zYBamEJ

我正在尝试实现类似于附加图像的效果。我创建了一个六边形进度条来显示用户进度，我尝试过使 svg 形状为圆形边缘，但它不起作用。有谁知道如何使 svg 进度条像外部和 Avatar 图像保持器六边形形状一样圆润。

任何帮助将不胜感激。

Answer 1

在圆角路径中使用stroke-linejoin: round

let max = 2160;
let progress = 80;
document.querySelector(".fill").setAttribute(
  "style",
  "stroke-dashoffset: " + ((100 - progress) / 100) * max
);

.user-avatar-holder{
    background: #1D2333;
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 25px auto;
    clip-path: polygon(
        47.5% 5.66987%,
        48.2899% 5.30154%,
        49.13176% 5.07596%,
        50% 5%,
        50.86824% 5.07596%,
        51.7101% 5.30154%,
        52.5% 5.66987%,
        87.14102% 25.66987%,
        87.85495% 26.16978%,
        88.47124% 26.78606%,
        88.97114% 27.5%,
        89.33948% 28.2899%,
        89.56505% 29.13176%,
        89.64102% 30%,
        89.64102% 70%,
        89.56505% 70.86824%,
        89.33948% 71.7101%,
        88.97114% 72.5%,
        88.47124% 73.21394%,
        87.85495% 73.83022%,
        87.14102% 74.33013%,
        52.5% 94.33013%,
        51.7101% 94.69846%,
        50.86824% 94.92404%,
        50% 95%,
        49.13176% 94.92404%,
        48.2899% 94.69846%,
        47.5% 94.33013%,
        12.85898% 74.33013%,
        12.14505% 73.83022%,
        11.52876% 73.21394%,
        11.02886% 72.5%,
        10.66052% 71.7101%,
        10.43495% 70.86824%,
        10.35898% 70%,
        10.35898% 30%,
        10.43495% 29.13176%,
        10.66052% 28.2899%,
        11.02886% 27.5%,
        11.52876% 26.78606%,
        12.14505% 26.16978%,
        12.85898% 25.66987%
    );
    position: relative;
    overflow: hidden;
}
.profile-image-outer{
    background: #1D2333;
    width: 360px;
    height: 360px;
    clip-path: polygon(
        47.5% 5.66987%,
        48.2899% 5.30154%,
        49.13176% 5.07596%,
        50% 5%,
        50.86824% 5.07596%,
        51.7101% 5.30154%,
        52.5% 5.66987%,
        87.14102% 25.66987%,
        87.85495% 26.16978%,
        88.47124% 26.78606%,
        88.97114% 27.5%,
        89.33948% 28.2899%,
        89.56505% 29.13176%,
        89.64102% 30%,
        89.64102% 70%,
        89.56505% 70.86824%,
        89.33948% 71.7101%,
        88.97114% 72.5%,
        88.47124% 73.21394%,
        87.85495% 73.83022%,
        87.14102% 74.33013%,
        52.5% 94.33013%,
        51.7101% 94.69846%,
        50.86824% 94.92404%,
        50% 95%,
        49.13176% 94.92404%,
        48.2899% 94.69846%,
        47.5% 94.33013%,
        12.85898% 74.33013%,
        12.14505% 73.83022%,
        11.52876% 73.21394%,
        11.02886% 72.5%,
        10.66052% 71.7101%,
        10.43495% 70.86824%,
        10.35898% 70%,
        10.35898% 30%,
        10.43495% 29.13176%,
        10.66052% 28.2899%,
        11.02886% 27.5%,
        11.52876% 26.78606%,
        12.14505% 26.16978%,
        12.85898% 25.66987%
    );
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-image{
    background: #1D2333;
    width: 340px;
    height: 340px;
    clip-path: polygon(
        47.5% 5.66987%,
        48.2899% 5.30154%,
        49.13176% 5.07596%,
        50% 5%,
        50.86824% 5.07596%,
        51.7101% 5.30154%,
        52.5% 5.66987%,
        87.14102% 25.66987%,
        87.85495% 26.16978%,
        88.47124% 26.78606%,
        88.97114% 27.5%,
        89.33948% 28.2899%,
        89.56505% 29.13176%,
        89.64102% 30%,
        89.64102% 70%,
        89.56505% 70.86824%,
        89.33948% 71.7101%,
        88.97114% 72.5%,
        88.47124% 73.21394%,
        87.85495% 73.83022%,
        87.14102% 74.33013%,
        52.5% 94.33013%,
        51.7101% 94.69846%,
        50.86824% 94.92404%,
        50% 95%,
        49.13176% 94.92404%,
        48.2899% 94.69846%,
        47.5% 94.33013%,
        12.85898% 74.33013%,
        12.14505% 73.83022%,
        11.52876% 73.21394%,
        11.02886% 72.5%,
        10.66052% 71.7101%,
        10.43495% 70.86824%,
        10.35898% 70%,
        10.35898% 30%,
        10.43495% 29.13176%,
        10.66052% 28.2899%,
        11.02886% 27.5%,
        11.52876% 26.78606%,
        12.14505% 26.16978%,
        12.85898% 25.66987%
    );
    position: relative;
    overflow: hidden;
}
.profile-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.progress-bar {
    position: absolute;
    top: 50%;
    background: transparent;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    margin-top: -5px;
}
.progress {
    width: 100%;
    height: 100%;
    background: transparent;
}
.progress .track,
.progress .fill {
    fill: rgba(0, 0, 0, 0);
    stroke-width: 30;
    transform: translate(75px, 685px) rotate(-90deg);
}
.progress .track {
    stroke: #293249;
}
.progress .fill {
    stroke: #5BD853;
    stroke-linecap: round;
    stroke-dasharray: 2160;
    stroke-dashoffset: 2160;
    transition: stroke-dashoffset 1s;
    stroke-linejoin: round; /*Added this css*/
}
.progress.blue .fill {
    stroke: #5BD853;
    stroke-linejoin: round; /*Added this css*/
}

<div class="user-avatar-holder">
        <div class="progress-bar">
            <svg class="progress blue noselect" x="0px" y="0px" viewBox="0 0 776 628">
                <path class="track" d="M723 314L543 625.77 183 625.77 3 314 183 2.23 543 2.23 723 314z"></path>
                <path class="fill" d="M723 314L543 625.77 183 625.77 3 314 183 2.23 543 2.23 723 314z"></path>
            </svg>
        </div>
        <div class="profile-image-outer">
            <div class="profile-image">
                <img src="https://images.pexels.com/photos/1025804/pexels-photo-1025804.jpeg?auto=compress&cs=tinysrgb&h=350" alt="" width="500" height="500" >
            </div>
        </div>
    </div>

Answer 2

在 css 的帮助下，您可以制作任何形状的圆角。我会剪你的小脚本来制作下面的六角形

<a href="http://jsfiddle.net/kizu/bhGn4/" target="blank">CSS rotate no svg alternative</a>
<br />
<svg class="svg-graphic" width="560" height="645" viewBox="0 0 560 645" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <g>
        <clipPath id="hex-mask">
            <polygon points="270,0 0,160 0,485 270,645 560,485 560,160"></polygon>
        </clipPath>
    </g>
    <polygon fill="#23B8C4" points="268,0 0,158 0,483 268,644 558,483 558,158" transform="translate(1, 1)"></polygon> <a xlink:href="http://example.com" transform="scale(0.90) translate(32, 38)">     
                   <polygon fill="#2B6674" points="268,0 0,158 0,483 268,644 558,483 558,158" transform="translate(1, 1)"></polygon>
     <image clip-path="url(#hex-mask)" height="100%" width="100%" xlink:href="http://s29.postimg.org/4d5vaqymf/2cd961b.jpg" preserveAspectRatio="xMidYMin slice"></image>
    </a>

</svg>

用于制作圆角的 Css。根据您的需要定制价值

polygon{
border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;  
}