css+svg实现扇形步骤提示条效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+svg实现扇形步骤提示条效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.2.8.3.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300'>
  
<style>
@namespace svg url(http://www.w3.org/2000/svg);
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  max-height: 100%;
  margin-left: 300px;
}

body {
  display: flex;
  padding: 1.5rem;
  margin: 0;
  font-family: "Open Sans", arial, sans-serif;
  font-size: 1em;
  line-height: 1.5em;
}

svg {
  overflow: hidden;
  width: 100%;
  max-height: 100%;
}

#cie-exam-cycle {
  /*[id^="seg-"] {
      transform-origin: 50% 50%;
      transform: scale(1);
  }*/
}
#cie-exam-cycle .segment {
  fill: #0081c6;
  stroke: #ffffff;
  stroke-width: 2;
}
#cie-exam-cycle #seg-1 .segment {
  fill: #0081c6;
}
#cie-exam-cycle #seg-2 .segment {
  fill: #4694d0;
}
#cie-exam-cycle #seg-3 .segment {
  fill: #88b2df;
}
#cie-exam-cycle #seg-4 .segment {
  fill: #adc8e9;
}
#cie-exam-cycle #seg-5 .segment {
  fill: #c7d8ef;
}
#cie-exam-cycle #seg-6 .segment {
  fill: #eef2fa;
}
#cie-exam-cycle a,
#cie-exam-cycle .segment,
#cie-exam-cycle .circle,
#cie-exam-cycle .step-description,
#cie-exam-cycle .step-detail {
  transition: all 250ms ease-in-out;
}
#cie-exam-cycle a {
  transform-origin: 50% 50%;
  transform: scale(1);
}
#cie-exam-cycle a:hover .segment, #cie-exam-cycle a:focus .segment {
  fill: #c60036 !important;
  filter: url(#dropshadow);
}
#cie-exam-cycle a:hover .circle, #cie-exam-cycle a:focus .circle {
  fill: rgba(0, 0, 0, 0.3);
}
#cie-exam-cycle a:hover .step-description,
#cie-exam-cycle a:hover .step-detail, #cie-exam-cycle a:focus .step-description,
#cie-exam-cycle a:focus .step-detail {
  fill: #fff;
}
#cie-exam-cycle .circle {
  fill: #fff;
  font-size: 4rem;
  baseline-shift: -14%;
}
#cie-exam-cycle .number {
  font-size: 2rem;
}
#cie-exam-cycle .step-description {
  font-weight: 600;
}
#cie-exam-cycle .step-detail {
  font-size: 0.8rem;
}
#cie-exam-cycle .active .segment {
  fill: #c60036 !important;
}
#cie-exam-cycle .active .circle {
  fill: rgba(0, 0, 0, 0.3);
}
#cie-exam-cycle .active .step-description {
  fill: #fff;
}

.center-h-v {
  display: flex;
  align-content: center;
  justify-content: center;
}

.my-svg-alternate {
  display: none;
}

.no-svg .my-svg-alternate {
  display: block;
  width: 500px;
  height: 500px;
  background-image: url(//repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90);
}
</style>

</head>

<body  >
  <div class="center-h-v">
    <?xml version="1.0" standalone="no"?>
    <!--<?xml-stylesheet href="css/cie-exam-cycle.css" type="text/css"?>--> 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid" id="cie-exam-cycle" role="img" aria-labelledby="title  desc">
        <title id="title">CIE Exam Cycle</title>
        <desc id="desc">A diagram describing the CIE Exam Cycle.</desc>
        <defs>
            <path d="m 250,0 0,56 c 71.80721,0 134.51893,39.013497 168.0625,97 L 455.75,162.375 466.5,125 C 421.8418,47.649737 339.31639,1.7519687e-6 250,0 z m 0,70 0,180 155.875,-90 C 373.7211,104.30781 314.3078,70.000001 250,70 z" id="segment-start" />
            <path d="m 250,0 27,28 -27,28 c 71.80721,0 134.51893,39.013497 168.0625,97 L 455.75,162.375 466.5,125 C 421.8418,47.649737 339.31639,1.7519687e-6 250,0 z m 0,70 0,180 155.875,-90 C 373.7211,104.30781 314.3078,70.000001 250,70 z" id="segment-middle" />
            <path d="m 250,0 27,28 -27,28 c 71.80721,0 134.51893,39.013497 168.0625,97 L 466.5,125 C 421.8418,47.649737 339.31639,1.7519687e-6 250,0 z m 0,70 0,180 155.875,-90 C 373.7211,104.30781 314.3078,70.000001 250,70 z" id="segment-end" />
            <path d="m 250,0 c 92.51772,0 173.31573,50.26104 216.54778,124.98848" id="seg1" />
            <filter xmlns="http://www.w3.org/2000/svg" id="dropshadow" height="130%">
                <feGaussianBlur in="SourceAlpha" stdDeviation="3"/><!-- stdDeviation is how much to blur -->
                <feOffset dx="2" dy="2" result="offsetblur"/><!-- how much to offset -->
                <feComponentTransfer>
                    <feFuncA type="linear" slope="0.5"/><!-- slope is the opacity of the shadow -->
                </feComponentTransfer>
                <feMerge> 
                    <feMergeNode/><!-- this contains the offset blurred image -->
                    <feMergeNode in="SourceGraphic"/><!-- this contains the element that the filter is applied to -->
                </feMerge>
            </filter>
        </defs>
        <svg id="seg-1" >
            <title>Step 1: Preparation</title>
            <a xlink:href="#">
                <g transform="translate(0, 0) rotate(0 250 250)">
                    <use xlink:href="#segment-start" class="segment" />
                </g>
                <g transform="translate(260, 135)">
                    <text text-anchor="start" textLength="" class="step-detail">
                        <tspan x="0" dy="0">Getting ready</tspan>
                        <tspan x="0" dy="18">for the series</tspan>
                        <tspan x="0" dy="18">ahead</tspan>
                    </text>
                </g>
                <text dy="20" transform="rotate(4 250 250)">
                    <textPath xlink:href="#seg1" startOffset="48%" text-anchor="middle" method="align" spacing="exact" dominant-baseline="middle" class="step-description">
                        <tspan class="number">&#9312;</tspan>
                        <tspan>Preparation</tspan>
                    </textPath>
                </text>
            </a>
        </svg>
        <svg id="seg-2">
            <title>Step 2: Entries</title>
            <a xlink:href="#">
                <g transform="translate(0, 0) rotate(60 250 250)">
                    <use xlink:href="#segment-middle" class="segment" />
                </g>
                <g transform="translate(410, 227)">
                    <text textLength="" text-anchor="end" class="step-detail"><tspan x="0" dy="0">Entering</tspan><tspan x="0" dy="18">candid.........完整代码请登录后点击上方下载按钮下载查看