This is the code generated by highcharts for lines and point. I'm using inspect element and points are where they should be but they seem to be transparent or something like behind he chart. but the code looks right.
<g class="highcharts-series-group" zIndex="3">
<g class="highcharts-series" clip-path="url(http://localhost:63540/admin/reports.aspx?type=like#highcharts-1)" visibility="visible" transform="translate(40,10)">
<path d="M 244 50.4 L 732 302.6" fill="none" stroke="rgb(0, 0, 0)" stroke-width="5" isShadow="true" stroke-opacity="0.05" transform="translate(1,1)"></path>
<path d="M 244 50.4 L 732 302.6" fill="none" stroke="rgb(0, 0, 0)" stroke-width="3" isShadow="true" stroke-opacity="0.1" transform="translate(1,1)"></path>
<path d="M 244 50.4 L 732 302.6" fill="none" stroke="rgb(0, 0, 0)" stroke-width="1" isShadow="true" stroke-opacity="0.15000000000000002" transform="translate(1,1)"></path>
<path d="M 244 50.4 L 732 302.6" fill="none" stroke="#4D4D4D" stroke-width="2"></path><path d="M 732 298.6 C 737.328 298.6 737.328 306.6 732 306.6 C 726.672 306.6 726.672 298.6 732 298.6 Z" fill="#4D4D4D" stroke="#FFFFFF" stroke-width="0.000001" zIndex="2000"></path>
<path d="M 244 46.4 C 249.328 46.4 249.328 54.4 244 54.4 C 238.672 54.4 238.672 46.4 244 46.4 Z" fill="#4D4D4D" stroke="#FFFFFF" stroke-width="0.000001"></path></g></g>
What can be wrong with it?
It's funny that I have copied the code from my other project (that is working) and only have changed the data.
this is the compiled js code:
var dates = ['1394/12/06','1394/12/11'];
after.push(function () {
chart = new Highcharts.Chart({
chart: {
height: 500,
backgroundColor:'#eee',
renderTo: 'chart',
defaultSeriesType: 'line',
// marginRight: 130,
//marginBottom: 150,
// marginTop: 20,
// events: { click: function () { startWait($('html')); document.location = 'price.aspx' } }
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: dates,
labels: {
rotation: 90,
formatter: function () {
return this.value;
},
y:40
}
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
labels: {
formatter: function () {
// return toFarsi(virgulize(this.value)) ;
}
}
},
tooltip: {
formatter: function () {
return "<b>" + this.y + "</b>";
}
},
legend: {
//enabled: false
},
series: [
{
name:' likes',
color:'#4D4D4D',
data: [2,1]
},
]
});
});
Well after disabling css, javascript, and many other tests nothing worked.
Thanks to jlbriggs his fiddle gave me the idea of testing the code with older version of jquery.
It worked with older version of jquery.
Update:
New version of Highcharts works with the latest version of jquery.
Related
I have the following SVG:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="900" height="800">
<path d="M 650,750 L 50,750 L 100,350 L 850,50 L 850,550 L 650,750" fill="none" stroke="black" stroke-width="3" />
</svg>
When I try to render it with ExtrudeGeometry, I get the following:
The filling is set to none, so it should only have borders (at least this is what I am trying to achieve).
This is what I'm using to load it:
const svgResult = loader.parse(svgTxt);
svgResult.paths.forEach((path) => {
const shapes = SVGLoader.createShapes(path);
shapes.forEach((shape) => {
const geom = new THREE.ExtrudeGeometry(shape, {
bevelEnabled: true,
bevelSize: 14,
bevelThickness: 5,
bevelSegments: 15,
depth: 20,
});
const mesh = new THREE.Mesh(
geom,
new THREE.MeshPhysicalMaterial({
color: "white",
})
);
...
}
}
I have such an element made in SVG:
import Svg, { Path, Circle } from "react-native-svg"
function CloseIcon(props) {
return (
<Svg
viewBox="0 0 1000 1000"
fillRule="evenodd"
clipRule="evenodd"
strokeLinejoin="round"
strokeMiterlimit={2}
style={styles.shadow}
>
<Path
d="M500 420.886L781.42 139.464c19.297-19.28 50.622-19.28 69.919 0l9.179 9.195c19.296 19.28 19.296 50.623 0 69.903L579.097 499.983l281.438 281.455c19.296 19.28 19.296 50.622 0 69.902l-9.179 9.195c-19.296 19.28-50.622 19.28-69.918 0L500 579.081 218.562 860.535c-19.297 19.28-50.623 19.28-69.919 0l-9.179-9.195c-19.296-19.28-19.296-50.622 0-69.902l281.438-281.455-281.421-281.421c-19.297-19.28-19.297-50.623 0-69.903l9.178-9.195c19.297-19.28 50.623-19.28 69.92 0l281.42 281.422z"
fill="#fff"
/>
</Svg>
)
};
Is it possible to add a shadow to it?
These types of options do not work: (this solution treats the path as a rectangle)
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.23,
shadowRadius: 2.62,
elevation: 4,
I have this animation:
const brushKeyframes = {
translateX: [
{ value: -150, duration: 200, delay: 100 },
{ value: -180, duration: 200, delay: 200 },
{ value: 0, duration: 200, delay: 300 }
],
translateY: [
{ value: -160, duration: 200, delay: 100 },
{ value: 0, duration: 200, delay: 300 }
]
};
const paintingIconAnimation = anime({
targets: `.painting-icon__brush`,
...brushKeyframes,
delay: 400,
easing: "linear",
loop: true
});
.icon {
width: 150px;
height: 150px;
}
svg {
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.1.0/anime.min.js"></script>
<div class="icon painting-icon">
<svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
<g class="painting-icon__egg">
<path d="m174.233 41.593c82.515-.993 178.916 120.817 180.664 266.089 1.179 97.995-77.403 170.322-175.398 171.501-97.996 1.18-178.296-69.235-179.475-167.23-1.748-145.273 91.693-269.367 174.209-270.36z" fill="#f1cd88"></path>
<path d="m174.233 41.593c-7.254.087-14.592 1.145-21.942 3.066 76.061 19.681 154.906 131.769 156.485 263.023 1.095 90.996-66.589 159.847-154.724 170.164 8.318.978 16.811 1.441 25.446 1.337 97.995-1.179 176.577-73.506 175.398-171.501-1.747-145.272-98.148-267.082-180.663-266.089z" fill="#ebb34c"></path>
<g class="painting-icon__egg-top egg-top">
<path class="egg-top__main" d="m174.233 41.593c-51.847.624-108 49.855-142.151 122.395h21.135c23.712 0 42.934 19.222 42.934 42.934v112.7c0 16.066 13.024 29.091 29.091 29.091s29.091-13.024 29.091-29.091v-111.88c0-13.136 10.649-23.785 23.785-23.785s23.785 10.649 23.785 23.785v19.501c0 10.004 8.11 18.114 18.114 18.114s18.114-8.11 18.114-18.114v-24.116c0-31.227 25.315-56.542 56.542-56.542h17.192c-36.051-63.885-89.226-105.574-137.632-104.992z" fill="#80b6fc"></path>
<path class="egg-top__shadow" d="m269.115 152.695c7.678-3.899 16.357-6.111 25.557-6.111h17.192c-9.042-16.022-19.656-31.524-31.786-45.649-.141-.164-.283-.328-.424-.491-21.474-24.876-49.943-47.782-81.52-55.86-.21-.054-.42-.11-.63-.163-15.88-3.956-30.328-3.651-45.214.238 42.821 11.08 86.523 51.449 116.825 108.036z" fill="#62a4fb"></path>
</g>
</g>
<g class="painting-icon__basket">
<path d="m416.187 479.198h-137.091c-11.242 0-20.355-9.113-20.355-20.355v-111.1h177.801v111.1c0 11.242-9.113 20.355-20.355 20.355z" fill="#766d78"></path>
<path d="m405.767 347.743v111.1c0 11.242-9.113 20.355-20.355 20.355h30.775c11.242 0 20.355-9.113 20.355-20.355v-111.1z" fill="#655e67"></path>
<path d="m238.131 314.955v40.948c0 5.394 4.373 9.767 9.767 9.767h199.488c5.394 0 9.767-4.373 9.767-9.767v-40.948c0-5.394-4.373-9.767-9.767-9.767h-199.488c-5.394 0-9.767 4.373-9.767 9.767z" fill="#f7f3f1"></path>
<path d="m447.386 305.188h-30.776c5.394 0 9.767 4.373 9.767 9.767v40.948c0 5.394-4.373 9.767-9.767 9.767h30.775c5.394 0 9.767-4.373 9.767-9.767v-40.948c.001-5.394-4.372-9.767-9.766-9.767z" fill="#ebe1dc"></path>
<ellipse cx="347.642" cy="419.499" fill="#80b6fc" rx="39.651" ry="24.365"></ellipse>
</g>
<g class="painting-icon__brush">
<path d="m378.767 166.038c-20.7-20.702-54.483-20.672-75.149.065-8.107 8.135-13.015 18.246-14.755 28.778 0 0-5.274 29.198-20.47 44.545-4.268 4.31-3.721 11.409 1.321 14.781 32.361 21.645 81.521 14.441 109.052-13.09 20.732-20.733 20.733-54.346.001-75.079z" fill="#766d78"></path>
<path d="m378.767 166.038c-1.585-1.585-3.255-3.034-4.981-4.376 5.761 18.278 1.412 39.054-13.077 53.543-22.6 22.6-59.767 31.486-90.26 21.977-.666.772-1.347 1.527-2.056 2.243-4.268 4.31-3.721 11.409 1.321 14.781 32.361 21.645 81.521 14.441 109.052-13.09 20.732-20.731 20.733-54.345.001-75.078z" fill="#655e67"></path>
<path d="m351.356 193.446c-14.285-14.285-13.235-37.749 2.269-50.701l126.132-105.374c7.805-6.521 19.297-6.007 26.489 1.185s7.706 18.683 1.185 26.489l-105.374 126.132c-12.952 15.504-36.415 16.554-50.701 2.269z" fill="#94d4a2"></path>
<path d="m506.245 38.557c-2.857-2.857-6.394-4.641-10.107-5.369.247 4.778-1.705 10.224-5.734 14.831l-108.011 123.493c-10.756 12.298-26.327 17.188-37.517 12.938 1.613 3.239 3.769 6.283 6.481 8.995 14.285 14.285 37.749 13.235 50.701-2.269l105.373-126.131c6.52-7.805 6.006-19.297-1.186-26.488z" fill="#6dc17d"></path>
</g>
</svg>
</div>
I want to make a pause between animation loops: so when brush returns to the final point, it will stay here a bit before new movement starting. But I have no idea how to fix animation (timings, maybe?) properly to achieve it.
Thank you in advance!
Ok, finally I got it.
In arrayed keyframes in anime.js delays are not absolute, but kind of relative to each other. So I can fix delays in the array like that:
const brushKeyframes = {
translateX: [
{ value: -150, duration: 130, delay: 1300 },
{ value: -180, duration: 130, delay: 100 },
{ value: 0, duration: 130, delay: 100 }
],
translateY: [
{ value: -160, duration: 130, delay: 1300 },
{ value: 0, duration: 130, delay: 100 }
]
};
and it will work properly
I was able to add a pause between a timeline loop by adding an empty key frame with duration for the last item of my timeline.
In the following example, the animation will loop after 3000ms (3s).
var timeline = anime.timeline({ duration: 15000, loop: true, easing: 'linear' })
timeline
.add({
targets: '#a',
keyframes: [
{ translateX: '-300%', duration: 6000 },
{ zIndex: 0, duration: 0 },
{ translateX: '-150%', duration: 3000 },
{ opacity: 0, duration: 3000 },
],
})
.add({
targets: '#b',
keyframes: [
{ scale: 1.5, duration: 4000 },
{ duration: 3000 }
],
},
'-=2500'
);
how to display an icon by type attr in vue.js?
HTML
<icon type="heart"></icon>
<icon type="heartFull"></icon>
Vue
Vue.component('icon', {
data: {
type: {
heart: '<g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="#c3cad5" stroke="#c3cad5"><path fill="none" stroke="#c3cad5" stroke-miterlimit="10" d="M21.243,3.757 c-2.343-2.343-6.142-2.343-8.485,0c-0.289,0.289-0.54,0.6-0.757,0.927c-0.217-0.327-0.469-0.639-0.757-0.927 c-2.343-2.343-6.142-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L12,21.485l9.243-9.243C23.586,9.899,23.586,6.1,21.243,3.757z"></path></g>',
heartFull: '<g fill="#c3cad5"><path fill="#c3cad5" d="M21.95,3.051C20.627,1.729,18.87,1,17,1s-3.627,0.729-4.949,2.05C12.034,3.067,12.017,3.084,12,3.102 c-0.017-0.018-0.033-0.034-0.05-0.051C10.627,1.729,8.87,1,7,1S3.373,1.729,2.05,3.051S0,6.13,0,8s0.728,3.627,2.05,4.949l9.95,9.95 l9.95-9.95C23.272,11.627,24,9.87,24,8C24,6.131,23.272,4.373,21.95,3.051z"></path></g>'
}
},
props: {
width: {
type: Number,
default: 24
},
height: {
type: Number,
default: 24
},
},
computed: {
viewBox() {
return '0 0 ' + this.width + ' ' + this.height
}
},
template: '<svg xmlns="http://www.w3.org/2000/svg" :viewBox="viewBox" :width="width" :height="height">{{ type }}</svg>',
})
Expected result
<icon type="heart"></icon>
it turns into
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24" width="24" height="24"><g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="#c3cad5" stroke="#c3cad5"><path fill="none" stroke="#c3cad5" stroke-miterlimit="10" d="M21.243,3.757 c-2.343-2.343-6.142-2.343-8.485,0c-0.289,0.289-0.54,0.6-0.757,0.927c-0.217-0.327-0.469-0.639-0.757-0.927 c-2.343-2.343-6.142-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L12,21.485l9.243-9.243C23.586,9.899,23.586,6.1,21.243,3.757z"></path></g></svg>
or
<icon type="heartFull"></icon>
it turns into
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24" width="24" height="24"><g fill="#c3cad5"><path fill="#c3cad5" d="M21.95,3.051C20.627,1.729,18.87,1,17,1s-3.627,0.729-4.949,2.05C12.034,3.067,12.017,3.084,12,3.102 c-0.017-0.018-0.033-0.034-0.05-0.051C10.627,1.729,8.87,1,7,1S3.373,1.729,2.05,3.051S0,6.13,0,8s0.728,3.627,2.05,4.949l9.95,9.95 l9.95-9.95C23.272,11.627,24,9.87,24,8C24,6.131,23.272,4.373,21.95,3.051z"></path></g></svg>
In this way I would create more icons over time and use them easily. Thanks!
Well your type is not a prop but a data property. And it is an object. So right now you are inserting the whole object type from your data into svg.
Try this:
Vue.component('icon', {
props: {
iconType: {
type: String,
default: "heart"
},
width: {
type: Number,
default: 24
},
height: {
type: Number,
default: 24
}
},
data() {
return {
types: {
heart:
'<g stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="#c3cad5" stroke="#c3cad5"><path fill="none" stroke="#c3cad5" stroke-miterlimit="10" d="M21.243,3.757 c-2.343-2.343-6.142-2.343-8.485,0c-0.289,0.289-0.54,0.6-0.757,0.927c-0.217-0.327-0.469-0.639-0.757-0.927 c-2.343-2.343-6.142-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L12,21.485l9.243-9.243C23.586,9.899,23.586,6.1,21.243,3.757z"></path></g>',
heartFull:
'<g fill="#c3cad5"><path fill="#c3cad5" d="M21.95,3.051C20.627,1.729,18.87,1,17,1s-3.627,0.729-4.949,2.05C12.034,3.067,12.017,3.084,12,3.102 c-0.017-0.018-0.033-0.034-0.05-0.051C10.627,1.729,8.87,1,7,1S3.373,1.729,2.05,3.051S0,6.13,0,8s0.728,3.627,2.05,4.949l9.95,9.95 l9.95-9.95C23.272,11.627,24,9.87,24,8C24,6.131,23.272,4.373,21.95,3.051z"></path></g>'
}
};
},
computed: {
viewBox() {
return "0 0 " + this.width + " " + this.height;
}
},
template:
'<svg xmlns="http://www.w3.org/2000/svg" :viewBox="viewBox" :width="width" :height="height" v-html="this.types[this.iconType]"></svg>'
};
})
<icon iconType ="heart"></icon>
<icon iconType ="heartFull"></icon>
I'm creating a component in my application built with Vue. This componet is a countdown, ranging from X minutes to 00:00.
I know it's possible to animate svg to achieve the desired result, but I do not have the necessary knowledge. I have never used any svg library.
I need to create the following animation in my progress component:
The animation need to follow the path according to the weather in a smooth way. The path nodes should be inserted / updated based on time.
This is my actual countdown component:
var app = new Vue({
el: '#app',
data: {
date: moment(2 * 60 * 1000)
},
computed: {
time: function(){
return this.date.format('mm:ss');
}
},
mounted: function(){
var timer = setInterval(() => {
this.date = moment(this.date.subtract(1, 'seconds'));
if(this.date.diff(moment(0)) === 0){
clearInterval(timer);
alert('Done!');
}
}, 1000);
}
});
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">{{ time }}</div>
This is the svg for the progress circle:
<svg x="0px" y="0px" viewBox="0 0 90 90">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:none;stroke:#B5B5B5;stroke-miterlimit:10;}
.st2{fill:none;stroke:#408EFF;stroke-linecap:round;stroke-miterlimit:10;}
.st3{fill:#408EFF;}
</style>
<rect class="st0" width="90" height="90"/>
<circle class="st1" cx="45" cy="45" r="40"/>
<path class="st2" d="M45,5c22.1,0,40,17.9,40,40S67.1,85,45,85S5,67.1,5,45S22.9,5,45,5"/>
<circle class="st3" cx="45" cy="5" r="3"/>
</svg>
How can I achieve the desired result?
All help would be welcome.
You'll need to familiarize yourself with SVG shapes, in particular <path> in order to make the arc.
Here's an example:
Vue.component('progress-ring', {
template: '#progress-ring',
props: {
value: {
type: Number,
default: 0,
},
min: {
type: Number,
default: 0,
},
max: {
type: Number,
default: 1,
},
text: {
type: null,
default: '',
},
},
computed: {
theta() {
const frac = (this.value - this.min) / (this.max - this.min) || 0;
return frac * 2 * Math.PI;
},
path() {
const large = this.theta > Math.PI;
return `M0,-46 A46,46,0,${large ? 1 : 0},1,${this.endX},${this.endY}`;
},
endX() {
return Math.cos(this.theta - Math.PI * 0.5) * 46;
},
endY() {
return Math.sin(this.theta - Math.PI * 0.5) * 46;
},
},
});
new Vue({
el: '#app',
});
body {
font-family: sans-serif;
}
.progress-ring {
width: 100px;
height: 100px;
}
.progress-ring-circle {
stroke: rgba(0, 0, 0, 0.1);
stroke-width: 1;
fill: none;
}
.progress-ring-ring {
stroke: #007fff;
stroke-width: 2;
fill: none;
}
.progress-ring-end {
fill: #007fff;
}
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<div id="app">
<progress-ring :min="0" :max="100" :value="40" text="12:34"></progress-ring>
</div>
<template id="progress-ring">
<svg class="progress-ring" viewBox="-50,-50,100,100">
<circle class="progress-ring-circle" r="46"/>
<path class="progress-ring-ring" :d="path"/>
<circle class="progress-ring-end" :cx="endX" :cy="endY" r="4"/>
<text alignment-baseline="middle" text-anchor="middle">{{ text }}</text>
</svg>
</template>
As for animating it, you just need to use JavaScript to change the value prop by using, for example, setInterval or some other means.
Follow your template, one solution is pre-define the path into one array (each path node is one element of the array). Then push the path node to current progress path for each interval.
Like below demo:
var app = new Vue({
el: '#app',
data: {
date: moment(2 * 60 * 1000),
pathRoute: ['M45 5', 'c22.1 0 40 17.9 40 40','S67.1 85 45 85','S5 67.1 5 45','S22.9 5 45 5'],
pathProgess: [],
stepIndex: 0
},
computed: {
time: function(){
return this.date.format('mm:ss');
},
computedProgress: function () {
return this.pathProgess.join(' ')
}
},
mounted: function(){
var timer = setInterval(() => {
this.date = moment(this.date.subtract(1, 'seconds'));
this.$set(this.pathProgess, this.stepIndex, this.pathRoute[this.stepIndex])
this.stepIndex++
if(this.date.diff(moment(0)) === 0){
clearInterval(timer);
}
}, 1000);
}
});
.st0{fill:#FFFFFF;}
.st1{fill:none;stroke:#B5B5B5;stroke-miterlimit:10;}
.st2{fill:none;stroke:#408EFF;stroke-linecap:round;stroke-miterlimit:10;}
.st3{fill:#408EFF;}
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<p>{{computedProgress}}</p>
<svg x="0px" y="0px" viewBox="0 0 90 90">
<rect class="st0" width="90" height="90"/>
<circle class="st1" cx="45" cy="45" r="40"/>
<text class="circle-chart-percent" x="20.91549431" y="40.5" font-size="8">{{time}}</text>
<path class="st2" :d="computedProgress"/>
<circle class="st3" cx="45" cy="5" r="3"/>
</svg>
</div>
Or you can use the approach Answered at another question, to real time calculate the path.
var app = new Vue({
el: '#app',
data: {
date: moment(2 * 60 * 1000),
pathProgess: ''
},
computed: {
time: function(){
return this.date.format('mm:ss');
}
},
mounted: function(){
let maxValue = this.date.diff(moment(0), 'seconds') //total seconds
var timer = setInterval(() => {
this.date = moment(this.date.subtract(1, 'seconds'))
let curValue = this.date.diff(moment(0), 'seconds') // current seconds
this.pathProgess = this.describeArc(45, 45, 40, 0, (maxValue-curValue)*360/maxValue)
if(this.date.diff(moment(0)) === 0){
clearInterval(timer);
}
}, 1000);
},
methods: {
//copy from https://stackoverflow.com/a/18473154/5665870
polarToCartesian: function (centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
},
//copy from https://stackoverflow.com/a/18473154/5665870
describeArc: function (x, y, radius, startAngle, endAngle){
var start = this.polarToCartesian(x, y, radius, endAngle);
var end = this.polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");
return d;
}
}
});
.st0{fill:#FFFFFF;}
.st1{fill:none;stroke:#B5B5B5;stroke-miterlimit:10;}
.st2{fill:none;stroke:#408EFF;stroke-linecap:round;stroke-miterlimit:10;}
.st3{fill:#408EFF;}
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<p>{{pathProgess}}</p>
<svg x="0px" y="0px" viewBox="0 0 90 90">
<rect class="st0" width="90" height="90"/>
<circle class="st1" cx="45" cy="45" r="40"/>
<text class="circle-chart-percent" x="20.91549431" y="40.5" font-size="8">{{time}}</text>
<path class="st2" :d="pathProgess"/>
<circle class="st3" cx="45" cy="5" r="3"/>
</svg>
</div>