blocks|key|114535|text|具有模式和y转换的SVG：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|114536|​|114537|svg:hover+pattern+#fillshape+{
++y:+0%25;
}
pattern+#fillshape+{
++transition:+y+1s;
++y:+100%25;
}|code-block|syntax|javascript|114538|<svg+version="1.1"+xmlns="http://www.w3.org/2000/svg"+xmlns:xlink="http://www.w3.org/1999/xlink"+x="0px"+y="0px"+width="79.36px"+height="93.844px"+viewBox="0+0+79.36+93.844">
++++<pattern+id="pattern1"
+++++++++++x="0"+y="0"+width="79.36"+height="93.844"
+++++++++++patternUnits="userSpaceOnUse"+>

++++++<rect+id="fillshape"+x="0"+y="0"+width="100%25"+height="200%25"+stroke="none"+fill="purple"+/>

++</pattern>
++<path+fill="url(#pattern1)"+stroke="black"+d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z"+/>
</svg>|114539|114540|现在，这在火狐或边缘中不起作用。它不会将x和y识别为CSS属性...|offset|length|style|BOLD|114541|这是一个在svg形状后面使用div的解决方案。这种解决方案的缺点是svg形状得到了一个背景，例如。如果只想要形状，则必须将形状的背景色与页面的背景色相匹配。|114542|114543|svg+{
++position:+relative;
}+
.spesial+{
++width:+90px;
++height:+0px;
++display:+inline-block;
++background-color:+purple;
++margin-left:+-100px;
++transition:+height+1s;
}
svg:hover+%2B+.spesial+{
++height:+100px;
}|114544|<svg+version="1.1"+xmlns="http://www.w3.org/2000/svg"+xmlns:xlink="http://www.w3.org/1999/xlink"+x="0px"+y="0px"+width="100"+height="100"+viewBox="0+0+75+90">
++<path+stroke="black"+fill="gray"+d="M-10,-10+100,-10+100,100+-10,100+-10,-10++50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z"+/>
</svg>
<div+class="spesial">
</div>|114545|114546|entityMap^0|0|0|0|0|0|5|5|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|16|8|@$N|17|O|18|P|Q]]|9|@]|A|$]]|$1|R|3|S|5|6|7|19|8|@]|9|@]|A|$]]|$1|T|3|C|5|6|7|1A|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|Y|3|C|5|6|7|1D|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|10|$]]

<p>SVG with pattern and y transition:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>svg:hover pattern #fillshape {
  y: 0%;
}
pattern #fillshape {
  transition: y 1s;
  y: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844"&gt;
    &lt;pattern id="pattern1"
           x="0" y="0" width="79.36" height="93.844"
           patternUnits="userSpaceOnUse" &gt;

      &lt;rect id="fillshape" x="0" y="0" width="100%" height="200%" stroke="none" fill="purple" /&gt;

  &lt;/pattern&gt;
  &lt;path fill="url(#pattern1)" stroke="black" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" /&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p>Now this does not work in <strong>Firefox or Edge</strong>. It does not recognize x and y as CSS properties...</p>

<p>Here is a solution that uses a div behind the svg shape.
The downside of this solution is that the svg shape gets a background eg. if you want the shape only you would have to match the background color of the shape with that of the background of the page.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
  position: relative;
} 
.spesial {
  width: 90px;
  height: 0px;
  display: inline-block;
  background-color: purple;
  margin-left: -100px;
  transition: height 1s;
}
svg:hover + .spesial {
  height: 100px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100" height="100" viewBox="0 0 75 90"&gt;
  &lt;path stroke="black" fill="gray" d="M-10,-10 100,-10 100,100 -10,100 -10,-10  50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" /&gt;
&lt;/svg&gt;
&lt;div class="spesial"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2660174|text|CHROME/SAFARI解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2660175|使用CSS属性transform和counter-increment，您可以实现填充和数字递增。|offset|length|style|CODE|2660176|2660177|代码片段|2660178|​|2660179|for+(var+i+=+0;+i+<+100;+i%2B%2B)+{
++setTimeout(function()+{
++++$(".progress-container+p").append("<span>");
++},+i+*+20);
}|code-block|syntax|javascript|2660180|pattern+#progressMove+{
++transform:+translateY(100%25);
++color:+purple;
++animation:+progressBar+2s+steps(100,+end)+forwards;
}
@keyframes+progressBar+{
++to+{
++++transform:+translateY(0);
++}
}
.progress-container+{
++margin:+0;
++display:+inline-block;
++position:+relative;
++counter-reset:+progress;
}
.progress-container+figcaption+{
++position:+absolute;
++top:+40%25;
++left:+50%25;
++transform:+translate(-40%25,+-50%25);
}
.progress-container+p+{
++margin:+0;
++font-weight:+bold;
}
.progress-container+span+{
++counter-increment:+progress;
}
.progress-container+p::after+{
++content:+counter(progress)"%25";
}|2660181|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure+class="progress-container">
++<svg+version="1.1"+xmlns="http://www.w3.org/2000/svg"+xmlns:xlink="http://www.w3.org/1999/xlink"+x="0px"+y="0px"+width="79.36px"+height="93.844px"+viewBox="0+0+79.36+93.844">
++++<pattern+id="progress"+x="0"+y="0"+width="79.36"+height="93.844"+patternUnits="userSpaceOnUse">
++++++<rect+id="progressMove"+x="0"+y="0"+width="100%25"+height="100%25"+stroke="none"+fill="currentColor"+/>
++++</pattern>
++++<path+fill="url(#progress)"+stroke="#000"+d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z"+/>
++</svg>
++<figcaption>
++++<p>

++++</p>
++</figcaption>
</figure>|2660182|2660183|2660184|注意：|2660185|如果我能给出一个更好的解决方案来覆盖浏览器支持，我会更新。|2660186|2660187|编辑：|2660188|根据+answer，您还必须将背景的颜色更改为其父背景的颜色。|2660189|整个组件将是figure元素，遗憾的是，spritesheet中的符号仅用于提供路径和背景。|2660190|2660191|注意:此版本中删除了jQuery。|blockquote|2660192|2660193|2660194|2660195|2660196|for+(var+i+=+0;+i+<+100;+i%2B%2B)+{
++setTimeout(function()+{
++++var+progressCounter+=+document.querySelector(".progress__counter"),
++++++number+=+document.createElement("span");
++++progressCounter.appendChild(number);
++},+i+*+20);
}|2660197|#spritesheet+{
++display:+none;
}
.icon+{
++display:+inline-block;
++width:+1em;
++height:+1em;
}
.icon-bubble+{
++font-size:+7em;
++color:+white;
}
.progress-container+{
++margin:+0;
++display:+inline-block;
++position:+relative;
++counter-reset:+progress;
++overflow:+hidden;
++line-height:+0;
}
.progress__inner+{
++position:+absolute;
++top:+0;
++left:+0;
++width:+100%25;
++height:+100%25;
++z-index:+-1;
}
.progress__fill+{
++background-color:+purple;
++height:+100%25;
++transform:+translateY(100%25);
++animation:+progressFill+2s+steps(100,+end)+forwards;
}
@keyframes+progressFill+{
++to+{
++++transform:+translateY(0);
++}
}
.progress__counter+{
++position:+absolute;
++top:+40%25;
++left:+50%25;
++transform:+translate(-40%25,+-50%25);
++margin:+0;
++font-weight:+bold;
}
.progress__counter+span+{
++counter-increment:+progress;
}
.progress__counter::after+{
++content:+counter(progress)"%25";
}|2660198|<figure+class="progress-container">
++<svg+class="icon+icon-bubble">
++++<use+xlink:href="#icon-bubble"></use>
++</svg>
++<figcaption+class="progress__inner">
++++<div+class="progress__fill"></div>
++++<p+class="progress__counter"></p>
++</figcaption>
</figure>

<svg+id="spritesheet">
++<symbol+id="icon-bubble"+viewBox="0+0+79.36+93.844">
++++<title>Loading+Bubble</title>
++++<path+id="bubble-cover"+fill="currentColor"+stroke="#000"+d="M-10,-10+100,-10+100,100+-10,100+-10,-10++50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z"+/>
++</symbol>
</svg>|2660199|2660200|测试：|2660201|2660202|Chrome+53|unordered-list-item|2660203|IE10|2660204|Edge|2660205|FireFox+47|2660206|IOS+10+Safari|2660207|2660208|2660209|游乐场|2660210|2660211|2660212|for+(var+i+=+0;+i+<+100;+i%2B%2B)+{
++setTimeout(function()+{
++++var+progressCounter+=+document.querySelector(".progress__counter"),
++++++number+=+document.createElement("span");
++++progressCounter.appendChild(number);
++},+i+*+20);
}|2660213|#spritesheet+{
++display:+none;
}
.icon+{
++display:+inline-block;
++width:+1em;
++height:+1em;
}
.icon-bubble+{
++font-size:+7em;
++color:+white;
}
.progress-container+{
++margin:+0;
++display:+inline-block;
++position:+relative;
++counter-reset:+progress;
++overflow:+hidden;
++line-height:+0;
}
.progress__inner+{
++position:+absolute;
++top:+0;
++left:+0;
++width:+100%25;
++height:+100%25;
++z-index:+-1;
}
.progress__fill+{
++background-color:+purple;
++height:+100%25;
++transform:+translateY(100%25);
++animation:+progressFill+2s+steps(100,+end)+forwards,+progressFillColor+100ms+linear+2s+forwards;
++position:+relative;
}
@keyframes+progressFill+{
++to+{
++++transform:+translateY(0);
++}
}
@keyframes+progressFillColor+{
++to+{
++++background-color:+green;
++}
}
.progress__counter+{
++position:+absolute;
++top:+40%25;
++transform:+translateY(-40%25);
++text-align:+center;
++width:+100%25;
++margin:+0;
++font-weight:+bold;
++animation:+progressCounter+100ms+linear+1s+forwards;
}
.progress__counter+span+{
++counter-increment:+progress;
}
.progress__counter::after+{
++content:+counter(progress)"%25";
++animation:+progressCounterCompleted+1s+linear+2s+forwards;
}
@keyframes+progressCounter+{
++to+{
++++color:+white;
++}
}
/*+Chrome+Only*/

@keyframes+progressCounterCompleted+{
++33%25+{
++++content:+"File(s)";
++}
++66%25+{
++++content:+"Uploaded";
++}
++100%25+{
++++content:+"Successfully!";
++}
}|2660214|<figure+class="progress-container">
++<svg+class="icon+icon-bubble">
++++<use+xlink:href="#icon-bubble"></use>
++</svg>
++<figcaption+class="progress__inner">
++++<div+class="progress__fill"></div>
++++<p+class="progress__counter"></p>
++</figcaption>
</figure>

<svg+id="spritesheet">
++<symbol+id="icon-bubble"+viewBox="0+0+79.36+93.844">
++++<title>Loading+Bubble</title>
++++<path+id="bubble-cover"+fill="currentColor"+stroke="#000"+d="M-10,-10+100,-10+100,100+-10,100+-10,-10++50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z"+/>
++</symbol>
</svg>|2660215|2660216|entityMap^0|0|7|9|H|H|0|0|0|0|0|0|0|0|0|0|0|0|0|0|6|6|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|2G|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|2H|8|@$D|2I|E|2J|F|G]|$D|2K|E|2L|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|2M|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|2N|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|2O|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|2P|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|O|7|2Q|8|@]|9|@]|A|$P|Q]]|$1|T|3|U|5|O|7|2R|8|@]|9|@]|A|$P|Q]]|$1|V|3|L|5|6|7|2S|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|2T|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|2U|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|2V|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|2W|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|2X|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|2Y|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|2Z|8|@$D|30|E|31|F|G]]|9|@]|A|$]]|$1|18|3|-4|5|6|7|32|8|@]|9|@]|A|$]]|$1|19|3|1A|5|1B|7|33|8|@]|9|@]|A|$]]|$1|1C|3|-4|5|6|7|34|8|@]|9|@]|A|$]]|$1|1D|3|-4|5|6|7|35|8|@]|9|@]|A|$]]|$1|1E|3|-4|5|6|7|36|8|@]|9|@]|A|$]]|$1|1F|3|L|5|6|7|37|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|O|7|38|8|@]|9|@]|A|$P|Q]]|$1|1I|3|1J|5|O|7|39|8|@]|9|@]|A|$P|Q]]|$1|1K|3|1L|5|O|7|3A|8|@]|9|@]|A|$P|Q]]|$1|1M|3|L|5|6|7|3B|8|@]|9|@]|A|$]]|$1|1N|3|1O|5|6|7|3C|8|@]|9|@]|A|$]]|$1|1P|3|-4|5|6|7|3D|8|@]|9|@]|A|$]]|$1|1Q|3|1R|5|1S|7|3E|8|@]|9|@]|A|$]]|$1|1T|3|1U|5|1S|7|3F|8|@]|9|@]|A|$]]|$1|1V|3|1W|5|1S|7|3G|8|@]|9|@]|A|$]]|$1|1X|3|1Y|5|1S|7|3H|8|@]|9|@]|A|$]]|$1|1Z|3|20|5|1S|7|3I|8|@]|9|@]|A|$]]|$1|21|3|-4|5|6|7|3J|8|@]|9|@]|A|$]]|$1|22|3|-4|5|6|7|3K|8|@]|9|@]|A|$]]|$1|23|3|24|5|6|7|3L|8|@]|9|@]|A|$]]|$1|25|3|-4|5|6|7|3M|8|@]|9|@]|A|$]]|$1|26|3|L|5|6|7|3N|8|@]|9|@]|A|$]]|$1|27|3|28|5|O|7|3O|8|@]|9|@]|A|$P|Q]]|$1|29|3|2A|5|O|7|3P|8|@]|9|@]|A|$P|Q]]|$1|2B|3|2C|5|O|7|3Q|8|@]|9|@]|A|$P|Q]]|$1|2D|3|L|5|6|7|3R|8|@]|9|@]|A|$]]|$1|2E|3|-4|5|6|7|3S|8|@]|9|@]|A|$]]]|2F|$]]

<h2>CHROME/SAFARI SOLUTION</h2>

<p>Using the CSS property <code>transform</code> and <code>counter-increment</code> you can achieve the fill and number increment.</p>

<p><strong><a href="https://jsfiddle.net/rickyruizm/qezpock9/" rel="nofollow noreferrer">jsFiddle</a></strong></p>

<h2>CODE SNIPPET</h2>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>for (var i = 0; i &lt; 100; i++) {
  setTimeout(function() {
    $(".progress-container p").append("&lt;span&gt;");
  }, i * 20);
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>pattern #progressMove {
  transform: translateY(100%);
  color: purple;
  animation: progressBar 2s steps(100, end) forwards;
}
@keyframes progressBar {
  to {
    transform: translateY(0);
  }
}
.progress-container {
  margin: 0;
  display: inline-block;
  position: relative;
  counter-reset: progress;
}
.progress-container figcaption {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-40%, -50%);
}
.progress-container p {
  margin: 0;
  font-weight: bold;
}
.progress-container span {
  counter-increment: progress;
}
.progress-container p::after {
  content: counter(progress)"%";
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;figure class="progress-container"&gt;
  &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844"&gt;
    &lt;pattern id="progress" x="0" y="0" width="79.36" height="93.844" patternUnits="userSpaceOnUse"&gt;
      &lt;rect id="progressMove" x="0" y="0" width="100%" height="100%" stroke="none" fill="currentColor" /&gt;
    &lt;/pattern&gt;
    &lt;path fill="url(#progress)" stroke="#000" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" /&gt;
  &lt;/svg&gt;
  &lt;figcaption&gt;
    &lt;p&gt;

    &lt;/p&gt;
  &lt;/figcaption&gt;
&lt;/figure&gt;</code></pre>
</div>
</div>
</p>

<hr>

<p><em>Note:</em></p>

<p>Will update if I can give a better solution to cover browser support.</p>

<hr>

<h2>EDIT:</h2>

<p>Based on <a href="https://stackoverflow.com/a/39725434/4305494"><strong>Persijn</strong></a> answer, you will as well have to change the color of the background to that of its parent.</p>

<p>The whole component would be the <code>figure</code> element, sadly the symbol in the spritesheet will only be used to provide the path and background.</p>

<blockquote>
  <p>Note: jQuery removed in this version.</p>
</blockquote>

<p><strong><a href="https://jsfiddle.net/rickyruizm/mb6v0zk9/" rel="nofollow noreferrer">jsFiddle</a></strong></p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>for (var i = 0; i &lt; 100; i++) {
  setTimeout(function() {
    var progressCounter = document.querySelector(".progress__counter"),
      number = document.createElement("span");
    progressCounter.appendChild(number);
  }, i * 20);
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#spritesheet {
  display: none;
}
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
}
.icon-bubble {
  font-size: 7em;
  color: white;
}
.progress-container {
  margin: 0;
  display: inline-block;
  position: relative;
  counter-reset: progress;
  overflow: hidden;
  line-height: 0;
}
.progress__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.progress__fill {
  background-color: purple;
  height: 100%;
  transform: translateY(100%);
  animation: progressFill 2s steps(100, end) forwards;
}
@keyframes progressFill {
  to {
    transform: translateY(0);
  }
}
.progress__counter {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-40%, -50%);
  margin: 0;
  font-weight: bold;
}
.progress__counter span {
  counter-increment: progress;
}
.progress__counter::after {
  content: counter(progress)"%";
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;figure class="progress-container"&gt;
  &lt;svg class="icon icon-bubble"&gt;
    &lt;use xlink:href="#icon-bubble"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  &lt;figcaption class="progress__inner"&gt;
    &lt;div class="progress__fill"&gt;&lt;/div&gt;
    &lt;p class="progress__counter"&gt;&lt;/p&gt;
  &lt;/figcaption&gt;
&lt;/figure&gt;

&lt;svg id="spritesheet"&gt;
  &lt;symbol id="icon-bubble" viewBox="0 0 79.36 93.844"&gt;
    &lt;title&gt;Loading Bubble&lt;/title&gt;
    &lt;path id="bubble-cover" fill="currentColor" stroke="#000" d="M-10,-10 100,-10 100,100 -10,100 -10,-10  50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" /&gt;
  &lt;/symbol&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<h2>TESTS:</h2>

<ul>
<li>Chrome 53</li>
<li>IE10</li>
<li>Edge</li>
<li>FireFox 47</li>
<li>IOS 10 Safari</li>
</ul>

<hr>

<h2>PLAYGROUND</h2>

<p><strong><a href="https://jsfiddle.net/rickyruizm/ktxrqos7/" rel="nofollow noreferrer">jsFiddle</a></strong></p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>for (var i = 0; i &lt; 100; i++) {
  setTimeout(function() {
    var progressCounter = document.querySelector(".progress__counter"),
      number = document.createElement("span");
    progressCounter.appendChild(number);
  }, i * 20);
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#spritesheet {
  display: none;
}
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
}
.icon-bubble {
  font-size: 7em;
  color: white;
}
.progress-container {
  margin: 0;
  display: inline-block;
  position: relative;
  counter-reset: progress;
  overflow: hidden;
  line-height: 0;
}
.progress__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.progress__fill {
  background-color: purple;
  height: 100%;
  transform: translateY(100%);
  animation: progressFill 2s steps(100, end) forwards, progressFillColor 100ms linear 2s forwards;
  position: relative;
}
@keyframes progressFill {
  to {
    transform: translateY(0);
  }
}
@keyframes progressFillColor {
  to {
    background-color: green;
  }
}
.progress__counter {
  position: absolute;
  top: 40%;
  transform: translateY(-40%);
  text-align: center;
  width: 100%;
  margin: 0;
  font-weight: bold;
  animation: progressCounter 100ms linear 1s forwards;
}
.progress__counter span {
  counter-increment: progress;
}
.progress__counter::after {
  content: counter(progress)"%";
  animation: progressCounterCompleted 1s linear 2s forwards;
}
@keyframes progressCounter {
  to {
    color: white;
  }
}
/* Chrome Only*/

@keyframes progressCounterCompleted {
  33% {
    content: "File(s)";
  }
  66% {
    content: "Uploaded";
  }
  100% {
    content: "Successfully!";
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;figure class="progress-container"&gt;
  &lt;svg class="icon icon-bubble"&gt;
    &lt;use xlink:href="#icon-bubble"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  &lt;figcaption class="progress__inner"&gt;
    &lt;div class="progress__fill"&gt;&lt;/div&gt;
    &lt;p class="progress__counter"&gt;&lt;/p&gt;
  &lt;/figcaption&gt;
&lt;/figure&gt;

&lt;svg id="spritesheet"&gt;
  &lt;symbol id="icon-bubble" viewBox="0 0 79.36 93.844"&gt;
    &lt;title&gt;Loading Bubble&lt;/title&gt;
    &lt;path id="bubble-cover" fill="currentColor" stroke="#000" d="M-10,-10 100,-10 100,100 -10,100 -10,-10  50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" /&gt;
  &lt;/symbol&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>


blocks|key|114557|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|114558|var+prObject+=+document.getElementById("prObject"),
++prDom+=+document.getElementById("progressMove"),
++prValue+=+0;

prObject.onmouseenter+=+function()+{
++prDom.setAttribute('class',+'prHover')
};
prObject.onmouseleave+=+function()+{
++prDom.removeAttribute('class')
};

/*prDom.setAttributeNS(null,+'y',+'0');*/

var+cTimer+=+setInterval(function()+{
++prValue+%2B=+20.6;
++prDom.style.transform+=+"translateY("+%2B+[100+-+Math.min(prValue,+100)]+%2B+"%25)";

++if+(prValue+>=+100)+{
++++clearInterval(cTimer);
++}
},+450);|code-block|syntax|javascript|114559|#progressMove+{
++transition:+transform+0.20s+linear;
}
#progressMove.prHover+{
++transform:+translateY(40%25)+!important;
}|114560|<!DOCTYPE+html>
<html>

<head>
++<title></title>
</head>

<body>
++<svg+id="kenseoProgress"+width="79.36px"+height="93.844px"+viewBox="0+0+79.36+93.844">
++++<defs>
++++++<path+id="mypath"+fill="white"+d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z"+/>
++++++<mask+id="bubbleKenseo">
++++++++<use+xmlns:xlink="http://www.w3.org/1999/xlink"+xlink:href="#mypath"></use>
++++++</mask>
++++</defs>
++++<g+x="0"+y="0"+width="79.36px"+height="93.844px"+mask="url(#bubbleKenseo)"+height="100"+stroke-width="0">
++++++<rect+id="progressMove"+x="0"+y="0"+width="100%25"+height="100%25"+fill="blue"+stroke="black"+style="transform:+translateY(100%25);"+/>
++++</g>
++++<g+id="prObject"+x="0"+y="0"+width="79.36px"+height="93.844px"+height="100"+fill-opacity="0"+stroke="black"+stroke-width="0.5px">
++++++<use+xmlns:xlink="http://www.w3.org/1999/xlink"+xlink:href="#mypath"></use>
++++</g>
++</svg>
</body>

</html>|114561|114562|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var prObject = document.getElementById("prObject"),
  prDom = document.getElementById("progressMove"),
  prValue = 0;

prObject.onmouseenter = function() {
  prDom.setAttribute('class', 'prHover')
};
prObject.onmouseleave = function() {
  prDom.removeAttribute('class')
};

/*prDom.setAttributeNS(null, 'y', '0');*/

var cTimer = setInterval(function() {
  prValue += 20.6;
  prDom.style.transform = "translateY(" + [100 - Math.min(prValue, 100)] + "%)";

  if (prValue &gt;= 100) {
    clearInterval(cTimer);
  }
}, 450);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#progressMove {
  transition: transform 0.20s linear;
}
#progressMove.prHover {
  transform: translateY(40%) !important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;svg id="kenseoProgress" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844"&gt;
    &lt;defs&gt;
      &lt;path id="mypath" fill="white" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" /&gt;
      &lt;mask id="bubbleKenseo"&gt;
        &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mypath"&gt;&lt;/use&gt;
      &lt;/mask&gt;
    &lt;/defs&gt;
    &lt;g x="0" y="0" width="79.36px" height="93.844px" mask="url(#bubbleKenseo)" height="100" stroke-width="0"&gt;
      &lt;rect id="progressMove" x="0" y="0" width="100%" height="100%" fill="blue" stroke="black" style="transform: translateY(100%);" /&gt;
    &lt;/g&gt;
    &lt;g id="prObject" x="0" y="0" width="79.36px" height="93.844px" height="100" fill-opacity="0" stroke="black" stroke-width="0.5px"&gt;
      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mypath"&gt;&lt;/use&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|114571|text|首先，您要使用clip-path，或者将mask填充设置为白色以获得100%25的不透明度：mask用作灰度alpha通道，红色填充颜色会导致不透明度发生变化。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|114572|至于笔划，您希望将其添加为不受剪切影响的单独元素。(您可以在defs和use__中重用该路径，我只是在这里复制粘贴了它)|114573|​|114574|#progressMove+{
++transition:+.3s+y;
}
#progressMove:hover+{
++y:+60%25;
}|code-block|syntax|javascript|114575|<svg+id="kenseoProgress"+width="79.36px"+height="93.844px"+viewBox="0+0+79.36+93.844">
++<defs>
++++<clipPath+id="bubbleKenseo">
++++++<path+d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z"+/>
++++</clipPath>
++</defs>
++<path+stroke="black"+stroke-width="1"+fill="transparent"+d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z"+/>
++<g+x="0"+y="0"+width="79.36px"+height="93.844px"+clip-path="url(#bubbleKenseo)"+height="100">
++++<rect+id="progressMove"+x="0"+y="0%25"+width="100%25"+height="100%25"+fill="blue"+stroke="black"+/>
++</g>
</svg>|114576|114577|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking^0|K|4|18|4|7|9|0|0|U|4|Z|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1C|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1D|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1E|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1F|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

<p>First off, you want to use <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking" rel="nofollow">clip-path</a>, or set the <code>mask</code> fill to white for 100% opacity: <code>mask</code> is used as a greyscale alpha channel and the red fill color causes the opacity change.</p>

<p>As for the stroke, you want to add it as a separate element that is not affected by the clipping. <em>(You can probably re-use the path with <code>defs</code> and <code>use</code>, I just copy-pasted it here)</em></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#progressMove {
  transition: .3s y;
}
#progressMove:hover {
  y: 60%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="kenseoProgress" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844"&gt;
  &lt;defs&gt;
    &lt;clipPath id="bubbleKenseo"&gt;
      &lt;path d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" /&gt;
    &lt;/clipPath&gt;
  &lt;/defs&gt;
  &lt;path stroke="black" stroke-width="1" fill="transparent" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" /&gt;
  &lt;g x="0" y="0" width="79.36px" height="93.844px" clip-path="url(#bubbleKenseo)" height="100"&gt;
    &lt;rect id="progressMove" x="0" y="0%" width="100%" height="100%" fill="blue" stroke="black" /&gt;
  &lt;/g&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>


<p>I have a requirement where I need to load js files dynamically and show the progress of loading files through a SVG icon. The SVG icon will act as progress bar where it fills with a color from bottom to top, linearly.</p>

<p>Here is the <a href="http://codepen.io/Mr_Green/pen/OXQbpp?editors=1100">codepen</a>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844"&gt;

  &lt;path fill="transparent" stroke="black" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" /&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p>I am planning to make this icon independent such that I will only pass the percentage value dynamically. </p>

<p>I somehow able to get the animation done but unable to keep the border or outline of the svg. Here is the <a href="http://codepen.io/Mr_Green/pen/wWygmN?editors=1010">code</a>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#progressMove {
  transition: .3s y;
}
#progressMove:hover {
  y: 60%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="kenseoProgress" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844"&gt;
  &lt;defs&gt;
    &lt;mask id="bubbleKenseo"&gt;
      &lt;path fill="red" stroke="black" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" /&gt;
    &lt;/mask&gt;
  &lt;/defs&gt;
  &lt;g x="0" y="0" width="79.36px" height="93.844px" mask="url(#bubbleKenseo)" height="100"&gt;
    &lt;rect id="progressMove" x="0" y="0%" width="100%" height="100%" fill="blue" stroke="black" /&gt;
  &lt;/g&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p>So, the problems I have are:</p>

<ul>
<li>Unable to maintain the border to the SVG</li>
<li>Whatever the color I add is having some kind of opacity which I am unable to remove.</li>
<li><strong>Edit</strong>: Browser compatibility:  IE11+, chrome, safari and firefox</li>
</ul>

<p>PS: I don't want to use SMIL animations.</p>


SVG progress bar

jQuery

我有一个需求，需要动态加载js文件，并通过SVG图标显示加载文件的进度。SVG图标将作为进度条，从下到上线性填充一种颜色。这是<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ...

问SVG进度条
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG进度条EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SVG进度条
EN